Ширина контейнера контейнера не растет

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

#container {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
}

#container > div {
  flex: 0 0 200px;
  height: 200px;
}

См. http://codepen.io/tamlyn/pen/dPjLoN/?editors=110

Однако, если направление гибкости изменяется на столбец, контейнер сжимается до ширины одного элемента гибкости, даже если элементы переносятся на следующий столбец.

#container {
  position: absolute;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#container > div {
  flex: 0 0 200px;
  width: 200px;
}

См. http://codepen.io/tamlyn/pen/rarbeN?editors=110

Как я могу заставить контейнер содержать все элементы flex в режиме column?

Ответы

Ответ 1

На самом деле я нашел решение только для CSS, но это не самая совершенная вещь в мире. Вот он: http://codepen.io/anon/pen/vEPBKK

Трюк здесь заключается в создании контейнера visibility: collapsed. В flex объекты visibility: collapsed выходят из нормального потока гибких дисков, но сохраняют свои размеры с целью компоновки. Это расширяет гибкий контейнер до требуемой ширины, но оставляет элементы гибкости незатронутыми. Однако есть несколько оговорок:

Для этого требуется немного возиться. Как вы можете видеть, магия <div> представляет собой заданную ширину, но она использует :nth-child для определения количества ящиков перед ней. Если ваш фактический дизайн разбивается на более или менее 3 строк, вам придется отрегулировать это, и вам, несомненно, придется отрегулировать ширину объекта.
Из-за ошибки рендеринга это не работает в IE. К счастью, некорректная реализация IE делает именно то, что вы хотели в первую очередь без каких-либо изменений, поэтому все, что вам нужно сделать, это предоставить IE собственную таблицу стилей с некоторыми условными утверждениями и снять div.magic старый добрый display: none.

HTML

<div id="container">
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="magic"></div>
</div>

CSS

#container {
  position: absolute;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 1px solid #f00;
  height: 650px;
  padding: 1px;
}

#container div.fb {
  border: 1px solid #555;
  flex: 0 0 200px;
  background-color: #ccc;
  width: 200px;
  margin: 1px;
  height: 200px;
}

#container > div.magic {
  height: 0;
  margin: 0;
  padding: 0;
  visibility: collapsed;
}

#container > div.magic:nth-child(5),
#container > div.magic:nth-child(6),
#container > div.magic:nth-child(7) {
  width: 408px;
}

#container > div.magic:nth-child(8),
#container > div.magic:nth-child(9),
#container > div.magic:nth-child(10) {
  width: 612px;
}

#container > div.magic:nth-child(11),
#container > div.magic:nth-child(12),
#container > div.magic:nth-child(13) {
  width: 816px;
}

Ответ 2

Я думаю, что это CSS, который вы ищете:

#container {
  display: flex;
  flex-flow: row wrap;
  border: 1px solid #f00;
  padding: 1px;
}

#container > * {
  border: 1px solid #555;
  background-color: #ccc;
  height: 200px;
  width: 200px;
  margin: 1px;
}

"Контейнер" всегда будет шириной его контейнера, в данном случае страницы, но теперь поля будут правильно отрегулированы внутри.

Сообщите мне, если я неправильно понял ваш вопрос.

Обновление

Я играю с тем, о чем вы просите в течение нескольких дней, и кажется, что невозможно делать то, что вы просите... по крайней мере, не в том направлении, о котором вы просите.

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

Ответ 3

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  border: 1px solid #f00;
}

.flex-item {
  background-color: #ccc;
  padding: 5px;
  width: 200px;
  height: 150px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  border: 1px solid #555;
}

<div id="container" class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
</div>