如何執行柔性包裝？

Question

我flex元素包含4幅圖像。我想顯示兩行，而不是一個這4個圖像。是否有可能實施這樣的事情與flex？

<div> 
<img src="image1.jpg /> 
<img src="image2.jpg /> 
<img src="image3.jpg /> 
<img src="image4.jpg /> 
</div> 

div { 
    display: flex; 
} 

Answer 1

您<img>標籤，你可以把flex: 1 50%;，然後在你的<div>你把flex-wrap: wrap;或者你可以把一個<br />你的第一個2個的img標籤後

編輯：

<div> 
<div class='container'><img src="image1.jpg /> 
<div class='container'><img src="image2.jpg /> 
<div class='container'><img src="image3.jpg /> 
<div class='container'><img src="image4.jpg /> 
</div> 

div { 
    display: flex; 
    flex-wrap: wrap; 
} 
.container { 
    flex: 1 50%; 
} 

東西像這樣可能工作？

Answer 2

<div class="flex"> 
    <img src="image1.jpg"> 
    <img src="image2.jpg"> 
    <img src="image3.jpg"> 
    <img src="image4.jpg"> 
</div> 

<style> 
    .flex { 
     display: flex; 
     flex-wrap: wrap; 
    } 

    .flex > img { 
     display: flex; 
     flex-basis: 50%; 
    } 
</style>