Оберните гибкие элементы в контейнер в направлении столбца

Question

Итак, чтобы обернуть элементы в гибкий div, используя макет строки, все что мне нужно сделать, это:

div {
  display: flex;
  flex-direction: row;  /* I want to change this to column */
  flex-wrap: wrap;      /* wrap doesn't seem to work on column, only row */
}

<div>
  <p>these</p>
  <p>will</p>
  <p>wrap</p>
</div>

Это работает для моих строк, но я хочу, чтобы это работало и для моих столбцов.

Я пытался просто изменить flex-direction в column, но это не похоже на работу. Кто-нибудь знает, как получить этот функционал?

Answer 1

Элементы уровня блока по умолчанию занимают всю ширину содержащего их блока. Это, по сути, решает width: 100%, который устанавливает разрыв в потоке контента в горизонтальном направлении.

Таким образом, гибкие элементы могут по умолчанию переноситься в контейнер в направлении строки.

Ничто в HTML или CSS, однако, не устанавливает высоту по умолчанию для элементов уровня блока. Высота зависит от содержания (height: auto).

Это означает, что элементы будут течь вертикально, без какой-либо причины ломаться.

(Я предполагаю, что где-то на линии эволюции, возможно, на основе исследований юзабилити, было решено, что для веб-приложений будет нормально расширяться по вертикали, а не по горизонтали.)

Вот почему flexbox автоматически не переносит элементы в направлении столбцов. Требуется определенная автором высота, чтобы служить точкой разрыва.

---

Однако часто высота макета является динамической, поэтому конкретная высота не может быть установлена. Это делает flexbox непригодным для упаковки элементов в направлении столбцов. Отличной альтернативой является CSS Grid Layout, который не требует установки высоты для контейнера:

div {
  display: grid;
  grid-gap: 10px;
}

p:nth-child(3n + 1) {
  grid-row: 1;
  background-color: aqua;
}

p:nth-child(3n + 2) {
  grid-row: 2;
  background-color: orange;
}

p:nth-child(3n + 3) {
  grid-row: 3;
  background-color: lightgreen;
}

p {
  margin: 0;
  padding: 10px;
}

<div>
  <p>ONE</p>
  <p>TWO</p>
  <p>THREE</p>
  <p>FOUR</p>
  <p>FIVE</p>
  <p>SIX</p>
  <p>SEVEN</p>
  <p>EIGHT</p>
  <p>NINE</p>
</div>

Браузерная поддержка CSS Grid

• Chrome - полная поддержка по состоянию на 8 марта 2017 г. (версия 57)
• Firefox - полная поддержка с 6 марта 2017 г. (версия 52)
• Safari - полная поддержка с 26 марта 2017 года (версия 10.1)
• Edge - полная поддержка по состоянию на 16 октября 2017 г. (версия 16)
• IE11 - нет поддержки текущей спецификации; поддерживает устаревшую версию

Вот полная картина: http://caniuse.com/