兩個 div 並排使用 flex

Question

我在筆記本電腦模式下有 4 個單元格當我想在電話模式下並排放置兩個單元格時，我必須移除外部 div 中的 flex 但我不能再擁有自動高度 div 。 如何解決這個問題

<div class="box">
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</div>

CSS

.box {
    height: auto;
    padding: 50px;
    background-color: red;
}
.row {
    display: flex;
}
.cell {
    float: right;
    width: 50%;
    height: 50px;
}

Answer 1

您必須使用另外 2 個 css 屬性，flex 和 flex-wrap。

為了確保當屏幕太小時單元格換行到下一行，您必須將屬性flex-wrap : wrap到 row 類。

然后你需要為單元格定義一個flex屬性。

flex屬性是這樣定義的

flex : flex-grow flex-shrink flex-basis;

flex-grow 和 flex-shrink 是增長和收縮系數。 在這里，所有單元格必須具有相同的寬度，所以我們不關心這個值（我已經將這些設置為 1）。 flex-basis 表示單元格的默認寬度

這是一個例子：

 .box { height: auto; padding: 50px; background-color: red; } .row { display: flex; flex-wrap:wrap; } .cell { flex: 1 1 200px; height: 50px; border:1px solid black; background-color: blue; }

 <div class="box"> <div class="row"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> </div>