Перенос элементов flexbox

Question

Требуется, чтобы до переноса элемент занимал к примеру 50% ширины во flex-контейнере, а после уже 100%. Подскажите, как это реализовать?

Answer 1

Для этих целей можно использовать flex-wrap: wrap для flex контейнера и свойство flex (flex-grow, flex-shrink, flex-basis) для flex-потомков.

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.flex-item {
  border: 1px solid black;
  height: 100px;
  flex: 1 0 45%; /*flex-basis должен позволять уместить 2 элемента в строку 
  с учетом отступов и бордера, для удобства можно сделать box-sizing: border-box*/
  box-sizing: border-box;
}

<div class="flex">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

БЛОГ НА HUSL

Перенос элементов flexbox

Ответы (1 шт):