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

Итак, чтобы обернуть элементы в гибкий 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, но похоже, что это не работает. Кто-нибудь знает, как получить эту функциональность?


css flexbox css-grid word-wrap
person Frank    schedule 07.05.2017    source источник
comment
Строка работает как есть, и когда элементы достигают ширины области просмотра / контейнера, которую она обертывает, но для столбца, и поскольку область просмотра не имеет высоты (по умолчанию auto), она просто продолжит расти, поэтому для нее собственно обернуть, ему нужна заданная высота.   -  person Ason    schedule 07.05.2017
comment
Ах, вы очень мудры. Я установил высоту для моего родительского элемента, но не непосредственно на моем гибком блоке. Я просто установил наследование и вуаля! Оно работает! Большое спасибо! Означает ли это, что область просмотра отслеживает только ширину, а не высоту?   -  person Frank    schedule 07.05.2017
comment
Да, нормальный поток страницы идет вниз, поэтому она просто начнет прокручиваться, когда контент станет слишком большим, а вбок - нет.   -  person Ason    schedule 07.05.2017
comment
очень хорошо. Однако теперь мой div flex-box не содержит новых столбцов, которые создаются при переносе моего содержимого. div flex-box имеет только ширину, которая содержит первый столбец. Есть ли способ расширить мой гибкий блок, чтобы он содержал его содержимое?   -  person Frank    schedule 07.05.2017
comment
Могу я дать ссылку на этот пост, в нем много всего обо всем этом: stackoverflow.com/questions/33891709/   -  person Ason    schedule 07.05.2017
comment
Кроме того, как правило, предоставление гибких элементов flex: 1 заставит их заполнить оставшееся пространство либо по горизонтали для гибкой строки, либо по вертикали для гибкой колонки.   -  person Ason    schedule 07.05.2017
comment
Это полезная ссылка. Я также нашел этот пост, в котором указывается, что гибкая модель столбца сломана в этом контейнере, ширина которого не будет расширяться, чтобы содержать обернутых дочерних элементов. stackoverflow.com/questions/23408539/ Я попробую установить для свойства flex значение 1 и посмотреть, что произойдет.   -  person Frank    schedule 07.05.2017
comment
установка flex:1 сделала свое дело! Спасибо! Вы сэкономили мне много времени! Если вы отправите ответ, я его приму!   -  person Frank    schedule 07.05.2017
comment
Уже есть много ответов на этот вопрос, и тот, который дал Michael_B, более правильный, так что сделайте это, и flex: 1 на мне :)   -  person Ason    schedule 07.05.2017

Ответы (1)


arrow_upward
4
arrow_downward

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

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

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

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

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

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

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

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/#search=grid

person Michael Benjamin    schedule 07.05.2017
comment
Спасибо, попробую. В настоящее время я использую writing-mode:vertical-lr и flex-direction:row, чтобы исправить небольшую ошибку, из-за которой flexbox не увеличивается, чтобы соответствовать обернутому содержимому, и я установил высоту на моем flexbox, чтобы содержимое было обернуто. - person Frank; 07.05.2017