是否可以使用flex構建以下佈局而不嵌套？

Question

例子：

是否有可能建造這種使用Flex佈局不築巢？純粹的，像這樣的結構：

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

*