Wie bekomme ich drei Spalten und zwei Zeilen (1 x 2 x 2) mit Flexbox

Question

Ich möchte das folgende Ergebnis mit Flex erreichen, wenn möglich. Wissen, wie man das mit CSS macht, aber nicht mit Flex vertraut ist. Der Grund, warum ich das tun will, ist es, mich zu zwingen, prägnante und besser zu wartende Codes zu schreiben.

.banner { 
 
    width: 20%; 
 
    height: 100%; 
 
    position: relative; 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 

 
.item { 
 
    height: 50%; 
 
    width: 33.33%; 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
.inner-item-block { 
 
    height: 100%; 
 
    width: 80%; 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
.inner-line { 
 
    border-right: 1px solid #dedede; 
 
    border-bottom: 1px solid #dedede; 
 
    height: 100%; 
 
    position: relative; 
 
    display: flex; 
 
    align-items: center; /* center child elements */ 
 
}

<div class="item-block"> 
 
    <div class="banner banner3"> 
 
    </div> 
 
    <div class="inner-item-block"> 
 
    <div class="item"> 
 
     <div class="inner-line"> 
 
     </div> 
 
    </div> 
 

 
    <div class="item"> 
 
     <div class="inner-line"> 
 
     </div> 
 
    </div> 
 

 
    <div class="item"> 
 
     <div class="inner-line"> 
 
     </div> 
 
    </div> 
 

 
    <div class="item"> 
 
     <div class="inner-line"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Wenn Sie feste Höhe auf übergeordnete Element festlegen können, dann können Sie dies mit Flexbox tun. Sie können flex-direction: column mit flex-wrap: wrap festlegen und das erste untergeordnete Element 100% der Höhe nehmen lassen.

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    margin: 0; 
 
} 
 
.parent { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
    flex-wrap: wrap; 
 
} 
 
.parent > div { 
 
    flex: 0 0 50%; 
 
    width: 33.33%; 
 
    border: 1px solid black; 
 
} 
 
div.first { 
 
    flex: 0 0 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="parent"> 
 
    <div class="first">First</div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

Neue Option, um dieses Layout zu erstellen, ist Grid-Layout, man muss nur grid-row: span 2 auf erstes Kind-Element festgelegt.

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    margin: 0; 
 
} 
 
.parent { 
 
    display: grid; 
 
    grid-template-columns: repeat(3, 1fr); 
 
    grid-auto-rows: minmax(100px, auto); 
 
} 
 
.parent > div { 
 
    border: 1px solid black; 
 
} 
 
div.first { 
 
    grid-row: span 2; 
 
}

<div class="parent"> 
 
    <div class="first">First</div><div></div><div></div><div></div><div></div> 
 
    <div class="first">First</div><div></div><div></div><div></div><div></div> 
 
</div>