Источник проблемы
Вот источник проблемы:
.flexContainer {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
align-content: flex-start; <-- problem
}
Фон
align-contentсвойство управляет выравниванием по оси линий сгиба внутри контейнера сгибания.Представьте себе гибкие линии как строки или столбцы (в зависимости от flex-direction), в которых находятся гибкие элементы.Другими словами, align-content распределяет пространство между и вокруг гибких линий, упаковывая их сверху, снизу, по центру и т. Д. (См. Полный список значений *1019*).
Потому чтоalign-content распределяет пространство между * и вокруг гибких линий, он может работать только на многолинейных гибких контейнерах.(Одна строка проходит по всей длине поперечной оси контейнера, не оставляя свободного места для работы align-content.)
Очевидно, многострочный контейнер - это контейнер с более чем одной линией (обернуть)Технически, однако, многострочный контейнер - это просто контейнер с flex-wrap: wrap или flex-wrap: wrap-reverse (независимо от того, были ли флекс-элементы обернуты или даже существуют).
Применяется та же концепцияк однострочному гибкому контейнеру, который является контейнером с flex-wrap: nowrap.Свойство align-content не действует в контейнерах nowrap, как обсуждалось выше.
§ 8.4.Упаковка линий Flex: свойство align-content
Свойство align-content выравнивает линии контейнера Flex внутри контейнера, когда на поперечной оси имеется дополнительное пространство, аналогично тому, как justify-content выравнивает отдельные элементы в пределах главной оси. Обратите внимание, это свойство не влияет на однострочный гибкий контейнер .
§ 6. Flex Lines
Гибкие элементы в гибком контейнере располагаются и выравниваются в пределах гибких линий , гипотетических контейнеров, используемых для группировки и выравнивания по алгоритму макета.Гибкий контейнер может быть как однострочным, так и многострочным, в зависимости от свойства flex-wrap:
A однострочный гибкий контейнер (т.е. один сflex-wrap: nowrap) размещает все свои дочерние элементы в одну строку, даже если это приведет к переполнению его содержимого.
A многострочный гибкий контейнер (то есть тот, у которого flex-wrap: wrap или flex-wrap: wrap-reverse) разбивает свои изгибаемые элементы на несколько строк, подобно тому, как текст разбивается на новую строку, когда он становится слишком широким, чтобы поместиться в существующую строку.
Несоответствие между Chrome и Firefox / Edge
Еще раз глядя на ваш код:
body {
background-color: teal;
}
.flexContainer {
background-color: blue;
border: 1px solid black;
height: 300px;
}
.flexItem {
background-color: red;
border: 1px solid black;
}
.flexContainer {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
align-content: flex-start;
}
.flexItem {
flex: 0 1 0;
}
<div class="flexContainer">
<div class="flexItem">1111111111111111111</div>
<div class="flexItem">2222<br/>2222</div>
<div class="flexItem">3333<br/>3333<br/>3333</div>
<div class="flexItem">4444444444444444444</div>
</div>
Обратите внимание на три вещи:
(1) Фактическая упаковка отсутствует.Все четыре элемента существуют в одной строке.Контейнер flex имеет одну строку.
(2) Для свойства flex-wrap установлено значение wrap (в сокращенной записи flex-flow).
(3) Свойство align-contentустановлен на flex-start.
Давайте разберем это.
Поскольку в гибком контейнере только одна строка, Chrome игнорирует align-content.Как написано в спецификации (см. Выше):
Свойство align-content не влияет на однострочный гибкий контейнер .
Так что это интерпретация Chrome.Если в действительности есть одна строка, игнорируйте align-content.
Переключение между wrap и nowrap в Chrome.Нет никакой разницы.
С другой стороны, поскольку контейнер установлен на flex-wrap: wrap, это технически создает многострочный гибкий контейнер, поскольку это касается Firefox и Edge.Фактическая упаковка или наличие гибких элементов не имеет значения.
Как написано в спецификации (см. Выше):
Многолинейный гибкий контейнер (т. Е. Один с flex-wrap: wrap или flex-wrap: wrap-reverse) разбивает свои flex-элементы на несколько строк ...
Переключение между wrap и nowrap в Firefox и Edge. Есть разница.
Так что у каждого браузера есть свой способ реализации этого поведения рендеринга.
Соответствие стандартам
С точки зрения соблюдения спецификации, я бы сказал, что Firefox и Edge полностью соответствуют требованиям. Кажется, они наиболее близко придерживаются формулировки в спецификации.
Однако я бы не охарактеризовал поведение Chrome как «ошибку». То, что они сделали, скорее всего вмешательство .
Вмешательство - это когда пользовательский агент решает немного отклониться от стандартизированного поведения, чтобы обеспечить значительно улучшенное взаимодействие с пользователем.
Вмешательства, как представляется, являются стандартной практикой в Chrome. Примеры:
Дополнительная информация