Два деления рядом с гибким

Question

У меня есть 4 ячейки в режиме ноутбука. И когда я хочу, чтобы в режиме телефона было две ячейки рядом, мне нужно убрать изгиб во внешнем div, но я больше не могу иметь автоматический высот 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- растут и сжимаются, растут и сжимаются с коэффициентом. Здесь все ячейки должны иметь одинаковую ширину, поэтому мы не заботимся об этом значении (я установил их в 1). Flex-основе указывают ширину ячейки по умолчанию

Вот пример:

.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>