Родитель динамической ширины с переносом столбцов flexbox?

Родитель имеет только display: flex и flex-wrap: wrap, а дети имеют фиксированные height и width из 150px. Который ведет себя так:

введите здесь описание изображения

Высота родительского контейнера расширяется по вертикали, чтобы облегчить размещение дочерних элементов.

Однако изменение родителя на flex-direction: column не имеет такого же поведения по горизонтали:

введите здесь описание изображения

Вместо того, чтобы родитель расширялся, чтобы соответствовать обертывающему содержимому, это дочерние элементы, которые перестраиваются для облегчения в родительском элементе.

Поведение, которого я хотел бы достичь с вертикальным переносом содержимого, выглядит следующим образом:

введите здесь описание изображения

Ну почти так. Представьте, что родитель заполняет пространство по вертикали и расширяется по горизонтали для обертывания содержимого. Горизонтальная версия первой гифки.

Возможно ли это с помощью flex-box?


css flexbox col multiple-columns
person barjo    schedule 27.01.2019    source источник
comment
Обратите внимание, что в большинстве случаев для элементов по умолчанию установлено значение height: auto. Это означает, что высота элемента равна высоте содержимого. Но это поведение не относится к ширине блочных элементов, которая по умолчанию установлена ​​равной полной ширине родителя (подумайте: width: 100%). Именно поэтому вы видите различное поведение в направлениях row и column (подробнее). По другим причинам см. дубликаты сообщений.   -  person Michael Benjamin    schedule 27.01.2019

Ответы (1)


arrow_upward
1
arrow_downward

Вы ищете align-content: start (он устарел flex-start, поэтому сетка и flexbox получают унифицированный синтаксис):

div {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: start;
}
span {
  width: 150px;
  height: 150px;
  border: 2px solid #f66;
  background-color: #eee;
  color: #f66;
  font: italic 2.1em sans-serif;
  padding: .21em;
}
body {
  background-color: #f95b68;
}
body { margin: 0;}
* {box-sizing: border-box}
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
  <span>11</span>
  <span>12</span>
  <span>13</span>
  <span>14</span>
</div>

person tao    schedule 27.01.2019
comment
Спасибо, это было полезно для исправления промежутков между элементами, хотя основная проблема, с которой я столкнулся, заключается в том, что родительский контейнер не настраивается для облегчения переноса столбцов, как это происходит при переносе строк. Изменить: после дальнейших исследований я обнаружил, что это недостаток гибкого макета, и это невозможно с простым css. - person barjo; 27.01.2019
comment
stackoverflow.com/questions/33891709/ Проблема, с которой я столкнулся, была рассмотрена в этом сообщении. Просто родительский контейнер не расширяется по ширине при переносе столбцов (тогда как при переносе строк родительский контейнер расширяется вниз без проблем). Цитата: Это похоже на фундаментальный недостаток гибкой верстки. Гибкий контейнер в направлении столбца не будет расширяться для размещения дополнительных столбцов. (Это не проблема в flex-direction: row.) - person barjo; 27.01.2019
comment
Это явно не то, что я понял из вашего вопроса. Рад, что вы нашли свой ответ. Я удалю свой ответ завтра. Уже достигнута дневная квота на удаление. Ваше здоровье! - person tao; 27.01.2019
comment
Все в порядке. Ваше объяснение имеет смысл относительно того, почему это может быть проблемой. Спасибо за вклад. - person barjo; 27.01.2019
comment
Глядя на это, я ожидаю, что изменение отображаемого значения <div> с flex на inline-flex даст эффект, который вы ищете. Однако он остается шириной в 1 столбец. Мне больше похоже на баг. - person tao; 27.01.2019