Как я могу сделать отображение: контейнер flex расширяется горизонтально с его обернутым содержимым?

При использовании css flexbox три основных браузера, по-видимому, ведут себя по-разному в определенных областях.

В этом случае я пытаюсь создать сетку изображений:

<div class="container">
     <div class="photo"></div>
     <div class="photo"></div>
     <div class="photo"></div>
     <div class="photo"></div>
     <div class="photo"></div>
     <div class="photo"></div>
</div>


.container {
    display:inline-flex;
    flex-flow : column wrap;
    align-content : flex-start;
    height : 100%;
}

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

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

Ниже приведен быстрый jsFiddle.

Поведение выглядит следующим образом:

  • IE 11. Правильно, контейнер растягивается горизонтально, чтобы обернуть каждый столбец обернутых элементов.
  • Firefox. Контейнер только обертывает первый столбец элементов, а остальные переполняются.
  • Chrome. Контейнер всегда растягивается, чтобы заполнить ширину своего родителя, что бы это ни было.

В этом случае я хотел бы добиться поведения IE11 в двух других браузерах. Поэтому мой вопрос: как я могу контейнер flexbox расширяться горизонтально, чтобы соответствовать его содержимому column wrap.

Спасибо заранее.

Ответы

Ответ 1

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

ширина контейнера = позиция последнего дочернего элемента - позиция контейнера + ширина последнего дочернего элемента (включая маржу)

Код:

$(document).ready(function() {
 $('.container').each(function( index ) {
     var lastChild = $(this).children().last();
     var newWidth = lastChild.position().left - $(this).position().left + lastChild.outerWidth(true);
     $(this).width(newWidth);
    })
});

Демо:

http://jsfiddle.net/qzea320L/

Ответ 2

Любопытно, что большинство браузеров правильно не реализовали контейнеры с гибкими столбцами, но поддержка режимов записи достаточно хороша.

Следовательно, вы можете использовать контейнер flex с вертикальным режимом записи. Это изменит направление блока с помощью встроенного направления, и, таким образом, элементы гибкости будут перемещаться вертикально. Затем вам нужно восстановить режим горизонтальной записи внутри элементов flex.

.container {
  display: inline-flex;
  writing-mode: vertical-lr;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 350px;
  background: blue;
}
.photo {
  writing-mode: horizontal-tb;
  width: 150px;
  height: 100px;
  background: red;
  margin: 2px;
}
<div class="container">
  <div class="photo">1</div>
  <div class="photo">2</div>
  <div class="photo">3</div>
  <div class="photo">4</div>
  <div class="photo">5</div>
  <div class="photo">6</div>
  <div class="photo">7</div>
  <div class="photo">8</div>
  <div class="photo">9</div>
</div>

Ответ 3

Спектр говорит, что то, что вы делаете, должно работать, но оно реализовано неправильно во всех основных браузерах, кроме Internet Explorer/Edge, что делает многострочные макеты inline-flex column бесполезными в настоящее время для большинства разработчиков. Здесь отчет об ошибке Chromium, приводящий пример, который фактически идентичен вашему, и отмечая, что он неправильно отображается в браузерах Chrome, Safari и Firefox.

Аргумент из spec более сложный, чем я могу понять, но ключевым моментом является то, что Модуль гибкого модуля макета модуля 1 spec определяет внутренний кросс-размер гибкого контейнера (то есть внутреннюю высоту контейнера flex flex-direction: row или внутреннюю ширину контейнера flex flex-direction: column) в разделе Flex Container Intrinsic Cross Size. Там сказано:

Для multi-line flex container, min-content/max-content cross size - это сумма кросс-размеров гибкой линии

То есть, внутренняя ширина контейнера flex-direction: column flex должна быть суммой ширины ее столбцов, как и следовало ожидать. (Это сложнее, чем это, и я не понимаю все это, но я считаю, что приведенное выше в целом верно). Однако Chrome, Firefox и Safari вычисляют эту ширину неправильно; установите width: min-content или width: max-content в поле column wrap flex в Chrome, вы можете ясно видеть, что ширина установлена ​​на ширину самого широкого одиночного элемента.

A глупое обходное решение для Chrome существует, но, вероятно, лучше всего избегать. Пока ошибка не устранена, эта часть модели Flexbox просто не работает так, как она была разработана, и нет чистого решения.

Ответ 4

У вас есть распределение макета столбца с контейнером с фиксированной высотой.

Когда вы устанавливаете направление гибкости в столбец, вы определяете вертикальную ось как основную ось.

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

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

PS: вы не должны полагаться на поведение IE, так как их поддержка flex в последнее время.