フレックスアイテムの2x2グリッドの横に大きいフレックスアイテム

Question

フレックスボックスを学ぼうとしています。これは私が再現するレイアウトです：

基本的には一つの大きなメイン・ボックス、残りは小さく、ミニグリッドを作成します。

#test { 
 
    display: flex; 
 
} 
 
.item { 
 
    background-color: #444; 
 
    padding: 5px 10px; 
 
    margin: 5px; 
 
    flex: 1 1 33%; 
 
} 
 
.item-1 { 
 
    height: 50px; 
 
} 
 
.item-3 { 
 
    order: 1; 
 
}

<div id="test"> 
 
    <div class="item item-1"> 
 
    A 
 
    </div> 
 
    <div class="item item-2"> 
 
    B 
 
    </div> 
 
    <div class="item item-3"> 
 
    C 
 
    </div> 
 
    <div class="item item-4"> 
 
    D 
 
    </div> 
 
</div>

これはfiddleへのリンクです。あなたがそのレイアウトを取得するには、コンテナの固定の高さを必要とする `HTML`で

Answer 1

#test { 
 
    display: flex; 
 
} 
 
#test > div { 
 
    flex: 0 0 48%;    /* width of first flex item in main container */ 
 
    height: 120px; 
 
} 
 
section { 
 
    flex: 0 0 48%;    /* width of second flex item in main container */ 
 
    display: flex;    /* nested flex container to arrange smaller items */ 
 
    flex-wrap: wrap;    /* make container multi-line */ 
 
} 
 
section > .item { 
 
    flex: 0 0 40%;    /* width of smaller items; two max per row */ 
 
    height: 50px; 
 
} 
 
.item { 
 
    background-color: #ccc; 
 
    padding: 5px; 
 
    margin: 5px; 
 
}

<div id="test"> 
 
    <div class="item">A</div> 
 
    <section><!-- NEW; nested flex container --> 
 
    <div class="item">B</div> 
 
    <div class="item">C</div> 
 
    <div class="item">D</div> 
 
    <div class="item">E</div> 
 
    </section> 
 
</div>