フレックスボックスの異なるサイズの子供

Question

私はフレックスボックスを学び、絵のようにそのようなレイアウトを作る方法を最初に知っていますか？ [ MyCodeFiddle ](http://jsfiddle.net/1s3bo913/)

layout project

Answer 1

ネストできますフレキシボックスコンテナ：

• 一つ外側容器A、B1とB2その二つの容器の内部display: flex; flex-direction: column;
• 、両方display: flex; flex-direction: row;
• インサイドそれらのうちの第1のもの（B1）2つの容器B1aおよびB1b
• B1Bが再びdisplay: flex; flex-direction: column;を持っているとB2の内部で2つのdiv要素や画像（ベリー写真）
• が含まれている2つの正規のDIV（なしフレキシボックスを）

Answer 2

あなたは2個の垂直.small-box ESのcolumnを作成することができますし、設定する必要があります親のflex: wrap。幅を調整して、親要素の寸法と一致させました。

.flex-container { 
 
    display: flex; 
 
    width: 500px; 
 
    height: 400px; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flex-container, .flex-col { 
 
    display: flex; 
 
} 
 

 
.flex-col { 
 
    flex-direction: column; 
 
} 
 

 
.large-box { 
 
    width: 300px; 
 
    height: 200px; 
 
    background: blue; 
 
} 
 

 
.small-box { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: yellow; 
 
} 
 

 
.medium-box { 
 
    width: 250px; 
 
    height: 200px; 
 
    background: red; 
 
}

<div class="flex-container"> 
 
    <div class="large-box"> 
 
    </div> 
 
    <div class="flex-col"> 
 
    <div class="small-box"> 
 
    </div> 
 
    <div class="small-box"> 
 
    </div> 
 
    </div> 
 
    <div class="medium-box"> 
 
    </div> 
 
    <div class="medium-box"> 
 
    </div> 
 
</div>