フレックスボックスで3列2行（1 x 2 x 2）を得る方法

Question

可能であれば、Flexで以下の結果を得たいと思います。 CSSでそれを達成する方法を知っていますが、Flexには慣れていません。私が自分で強制的に簡潔で整備可能なコードを書くようにするために、それをフレキシブルにしたいのです。

.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

あなたは親要素の上に固定された高さを設定できるなら、あなたはフレキシボックスでこれを行うことができます。 flex-direction: columnをflex-wrap: wrapに設定し、最初の子要素を高さの100％にすることができます。このレイアウトを作成するための

* { 
 
    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>

新しいオプションがグリッドレイアウトで、あなただけの最初の子要素にgrid-row: span 2を設定する必要があります。あなたがこれまでに試してみました何

* { 
 
    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>