Как перенести flex элемент на новую строку?

Question

Нужно перенести на новую строку элемент <div class="item">3</div>

.items {
  display: flex;
  /*flex-wrap: wrap; Без использования этого параметра */
}
.item {
  border: 1px solid #000;
  flex: auto;
}
.item:last-child {
  /* ? */
}

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Answer 1

Предположу, что 1й и 2й div-ы, даже имея разные размеры, должны занимать всю ширину контейнера. Тогда, все же с помощью flex-wrap, третий div можно переместить на новую строку, при этом он не обязательно должен быть во всю ширину контейнера. Возможно такой вариант вам подойдет

* {
  box-sizing: border-box;
}
.items {
  display: flex;
  flex-wrap: wrap;
}
.item {
  border: 1px solid #000;
}
.item:nth-child(1) {
  width: 35%;
}
.item:nth-child(2) {
  width: 65%;
}
.item:nth-child(3) {
  width: 100%;
}

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

БЛОГ НА HUSL

Как перенести flex элемент на новую строку?

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