如何在較小的屏幕中包裝Flexbox中的項目？

Question

我正在嘗試爲不同的大小創建佈局。我需要這些圖片在這裏以達到結果：

我有這樣的代碼：

.container { 
 
    position: relative; 
 
    display: flex; 
 
    align-items: stretch; 
 
} 
 
.item { 
 
    background-color: black; 
 
    box-sizing: border-box; 
 
    padding: 20px; 
 
    flex: 2; 
 
    color: #fff; 
 
} 
 
.item:nth-child(2) { 
 
    background-color: grey; 
 
    flex: 1 
 
} 
 
.item:nth-child(3) { 
 
    background-color: green; 
 
    flex: 0.5; 
 
} 
 
@media screen and (max-width: 990px) { 
 
    .container { 
 
    height: auto; 
 
    display: table; 
 
    } 
 
    .item:nth-child(2) { 
 
    float: left; 
 
    } 
 
    .item:nth-child(3) { 
 
    float: right; 
 
    } 
 
}

<section class="container"> 
 
    <div class="item"> 
 
    <h2>title1</h2> 
 
    <hr>You'll notice that even though this column has far more content in it, instead of the other columns ending early, they size themselves to meet the end of this column vertically.</div> 
 
    <div class="item"> 
 
    <h2>title2</h2> 
 
    <hr>Normally, the only way to achieve this would be either a hack, or to set all boxes to min-height. 
 
    </div> 
 
    <div class="item"> 
 
    <h2>title3</h2> 
 
    <hr>This is a column with not much content. 
 
    </div> 
 
</section>

這裏有一個codepen https://codepen.io/darudev/pen/pyBrzL

問題是990px​​調整視圖大小，我找不到與「moc」創建相同視圖的解決方案KUP」。

有沒有人可以幫助我或給我一些建議？

謝謝。

Answer 1

您不需要代碼中的表和浮動屬性。

@media screen and (max-width: 990px) { 
    .container { 
    height: auto; 
    display: table; 
    } 
    .item:nth-child(2) { 
    float: left; 
    } 
    .item:nth-child(3) { 
    float: right; 
    } 
} 

整個佈局可以用flexbox製作。

這裏的溶液：當屏幕調整大小比990px​​小，允許柔性物品包裹以及給所述第一項的100％的寬度，這迫使以下項目到下一行。

.container { 
 
    display: flex; 
 
} 
 

 
.item { 
 
    background-color: black; 
 
    box-sizing: border-box; 
 
    padding: 20px; 
 
    flex: 2; 
 
    color: #fff; 
 
} 
 

 
.item:nth-child(2) { 
 
    background-color: grey; 
 
    flex: 1; 
 
} 
 

 
.item:nth-child(3) { 
 
    background-color: green; 
 
    flex: 0.5; 
 
} 
 

 
@media screen and (max-width:990px) { 
 
    .container { flex-wrap: wrap; } 
 
    .item:first-child { flex-basis: 100%; } 
 
}

<section class="container"> 
 
    <div class="item"> 
 
    <h2>title1</h2> 
 
    <hr>You'll notice that even though this column has far more content in it, 
 
     instead of the other columns ending early, they size themselves to meet the end 
 
     of this column vertically.</div> 
 
    <div class="item"> 
 
    <h2>title2</h2> 
 
    <hr>Normally, the only way to achieve this would be either a hack, or to set 
 
     all boxes to min-height.</div> 
 
    <div class="item"> 
 
    <h2>title3</h2> 
 
    <hr>This is a column with not much content. 
 
    </div> 
 
</section>

revised codepen