html - 两个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 添加到行类。

然后您需要为单元格定义一个 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>