Элементы в гибком контейнере не обертываются

Когда я пытаюсь вставить элементы блока в контейнер flex, все они остаются на одной строке, как если бы они были встроенными блоками.

Я хотел бы, чтобы два первых div были на одной строке, а вторая - на второй строке. К сожалению, это не работает.

У кого-нибудь есть идея?

<div style="display: flex">
  <div style="display: inline-block">
    This is an inline block element
  </div>
  <div style="display: inline-block">
    This is an inline block element
  </div>
  <div style="display: block">
    This is a block element
  </div>
</div>

ОТВЕТЫ

Ответ 1

Исходная настройка контейнера flex - flex-wrap: nowrap. Это означает, что гибкие элементы вынуждены оставаться в одной строке.

Вы можете переопределить значение по умолчанию с помощью flex-wrap: wrap.

Значение гибких элементов display игнорируется в гибком макете.

Контейнер flex, который является элементом с display: flex или display: inline-flex, устанавливает контекст форматирования Flex. Хотя это похоже на контекст форматирования блоков, существуют различия.

Одно из отличий заключается в том, что дети контейнера flex игнорируют свойство display.

Другое отличие состоит в том, что в контейнере гибких полей поля не сбрасываются, а свойства float и clear не влияют.

В гибком контейнере также есть несколько настроек по умолчанию. Среди них:

  • justify-content: flex-start - гибкие элементы будут складываться в начале строки
  • flex-shrink: 1 - гибкие элементы разрешены для сжатия и не будут переполнять контейнер.
  • align-items: stretch - гибкие элементы будут расширяться, чтобы покрыть кросс-размер контейнера.
  • flex-direction: row - элементы гибкости будут выравниваться горизонтально
  • flex-wrap: nowrap - гибкие элементы вынуждены оставаться в одной строке

Обратите внимание на последние два элемента.

Элементы Flex выстраиваются в строку и не могут быть завершены.

Если вы хотите иметь два элемента гибкости в первой строке и третий элемент во второй строке, разрешите контейнеру быть многострочным с flex-wrap: wrap.

.container {
  display: flex;
  flex-wrap: wrap;
}
.box {
  flex: 0 0 45%;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
  border: 1px solid #ccc;
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Ответ 2

  • используйте flex-wrap:wrap в родительском, потому что по умолчанию flex-wrap есть nowrap

  • используйте flex-basis:50% в child, чтобы разделить оба элемента inline-block того же размера.

Подробнее об flexbox в этой статье: Полное руководство по Flexbox

*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  margin: 0
}
.flex {
  display: flex;
  flex-wrap: wrap
}
.flex div {
  flex: 0 50%; /*change to 1 50% to see the difference */
  border: 1px solid black;
  padding: 10px
}
<div class="flex">
  <div>
    This is an inline block element
  </div>
  <div>
    This is an inline block element
  </div>
  <div>
    This is a block element
  </div>
</div>