Блог

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

Для flexbox направление по умолчанию row

Свойство flex-direction определяет, как элементы flex размещаются в контейнере flex, задавая направление главной оси контейнера flex. Это определяет направление, в котором размещаются элементы flex.

Начальная строка: ^ссылка

Для CSS grid поток такой же row , но алгоритм размещения отличается:

Начальная строка

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

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

Если эти свойства не определяют никаких явных дорожек, явная сетка все равно содержит одну линию сетки на каждой оси. ^ссылка

Таким образом, для каждого элемента браузер создаст новую строку, и у вас будет свой макет сверху вниз.

Если вы измените flow на column, у вас будет противоположное поведение

столбец

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

И flexbox, и CSS grid ведут себя одинаково, но разница в том, что в CSS grid вам нужно определить столбцы, если вы этого не сделаете, браузер примет один столбец и разместит элемент слева направо, тогда сверху вниз будет отображаться только сверху вниз. Flexbox размещает элементы с учетом свободного места, и в нем отсутствует концепция столбца. Та же логика для расположения столбцов.