Html 两个带伸缩装置的并排div

我在笔记本电脑模式下有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属性，flex和flex wrap

要确保屏幕太小时单元格换行到下一行，必须将属性

flex wrap:wrap

添加到row类中

然后需要为单元格定义

flex

属性

flex

属性的定义如下

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

Flex grow和Flex shrink是生长和收缩系数。在这里，所有单元格必须具有相同的宽度，因此我们不关心这个值（我已将其设置为1）。 Flex basis表示单元格的默认宽度

下面是一个例子：

.box{
高度：自动；
填充：50px；
背景色：红色；
}
.行{
显示器：flex；
柔性包装：包装；
}
.细胞{
flex:1200px；
高度：50px；
边框：1px纯黑；
背景颜色：蓝色；
}

---

为什么需要删除flex？你不能这样做吗？

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