私はflex-cssで以下のレイアウトを達成するには

Question

私たちは5箱のフレックスコンテナを持っており、私は以下のイメージのように表示するように求められました。

私は、親コンテナ内で他の二つの容器を配置することにより、同様のレイアウトを実現することができました。以下のように。

が議論され、 Hereと回答しました。しかし、プロジェクトが存在することを考えると、それは採用するときに私たちのクラスの構造の変更を強制する複雑さを多く導入したと言われています。私は今、それらを単一のコンテナに入れることによって同じことを達成することを任されている。

.layout-5-3 { 
    flex-direction: row; 
    display: flex; 
} 

.layout-5-3 > div:nth-child(1) { 
    flex-basis: 48%; 
} 

.layout-5-3 > div:nth-child(2), 
.layout-5-3 > div:nth-child(3), 
.layout-5-3 > div:nth-child(4), 
.layout-5-3 > div:nth-child(5) { 
    flex-basis: 48%; 
    flex-direction: column; 
} 

と私のhtml

<div class="layout-5-3"> 
    <div class="box">Box1</div> 
    <div class="box">Box2</div> 
    <div class="box">Box3</div> 
    <div class="box">Box4</div> 
    <div class="box">Box5</div> 
</div> 

に私は左側に配置され、残りの半分のスペースを占有し、残りの4本に私の最初の子を期待していました。上記の私の基礎を考慮する。親コンテナの中に別のフレックスコンテナを導入しなければ、これを実現する方法はありますか？どんな助けもありがとう。

Answer 1

これは可能ですが、親の固定高さと子供の定義された幅を必要とします...それはいろいろな方法でさまざまなブラウザではまだバグがあります。

Codepen Demo

.layout-5-3 { 
 
    display: flex; 
 
    background: lightblue; 
 
    height: 250px; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    flex-wrap: wrap 
 
} 
 
.layout-5-3 > div { 
 
    border: 1px solid black; 
 
} 
 
.layout-5-3 > div:nth-child(1) { 
 
    width: 48%; 
 
    flex: 0 0 100%; 
 
    background: lightgreen; 
 
} 
 
.layout-5-3 > div:nth-child(2), 
 
.layout-5-3 > div:nth-child(3), 
 
.layout-5-3 > div:nth-child(4), 
 
.layout-5-3 > div:nth-child(5) { 
 
    width: 48%; 
 
    flex: 1; 
 
    background: pink; 
 
}

<div class="layout-5-3"> 
 
    <div class="box">Box1</div> 
 
    <div class="box">Box2</div> 
 
    <div class="box">Box3</div> 
 
    <div class="box">Box4</div> 
 
    <div class="box">Box5</div> 
 
</div>