次のレイアウトを入れ子にすることなくflexで構築することはできますか？

Question

例：

ネストせずにフレックスとレイアウトのこの種を建てすることが可能ですか？純粋に、このような構造で：

<div class="long"> 
</div> 

<div class="short"> 
</div> 

<div class="short"> 
</div> 

<div class="short"> 
</div> 

<div class="short"> 
</div> 

Answer 1

確かに。いいえ、その後、あなたはボックスが動的コンテンツに調整したい場合は

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-flow: column; 
 
    flex-wrap: wrap; 
 
    max-height: 200px; 
 
    max-width: 320px; 
 
} 
 

 
.long { 
 
    background-color: red; 
 
    border: thin solid darkgray; 
 
    width: 100px; 
 
    height: 200px; 
 
} 
 

 
.short { 
 
    background-color: blue; 
 
    border: thin solid darkgray; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div class="container"> 
 
    <div class="long"></div> 
 
    <div class="short"></div> 
 
    <div class="short"></div> 
 
    <div class="short"></div> 
 
    <div class="short"></div> 
 
</div>

*