От автора: в этом посте вы узнаете разницу между значениями выравнивания start, flex-start и self-start в flexbox.
При выравнивании элементов по началу и концу строки в flexbox есть несколько значений на выбор. В этом посте я собираюсь объяснить разницу между некоторыми значениями, которые, как кажется, делают очень похожие вещи:
flex-start и flex-end
start и end
self-start и self-end
Значения start, end, self-start и self-end доступны в Firefox, и в Chrome Canary. Ожидается, что они появятся в Chrome 93. Для работы демо версии вам понадобится поддерживающий браузер.
Терминология flexbox
Есть несколько терминов, которые помогают понять выравнивание во flexbox. Я буду использовать их ниже, и, если вы хотите узнать больше – обратитесь к спецификации Box Alignment.
Контейнер выравнивания
Это родительский элемент для ваших flex элементов, следовательно, элемент который имеет display:flex добавляется к нему.
Предмет выравнивания
Это flex элемент, то, что выравнивается.
Главная ось
Это направление свойства flex-direction. Если значение этого свойства – row, то ваша главная ось row.
Поперечная ось
Это направление поперек от заданного в flex-direction. Если flex-direction равно row, то ваша поперечная ось равна column.
Main-start и main-end
Начало и конец главной оси.
Cross-start and cross-end
Начало и конец поперечной оси.
Обратите внимание, что кроме flex-start и flex-end, которые относятся к flexbox, эти значения могут использоваться в любом контексте форматирования, который поддерживает выравнивание, например, в CSS Grid Layout.
flex-start и flex-end по сравнению с start и end
В следующем примере есть flex контейнер (контейнер выравнивания) с двумя flex элементами (объектами выравнивания) внутри. Первоначальное flex-direction равно row.
Используя поля выбора, попробуйте разные значения для justify-content. Поскольку flex-direction:row, то flex-start делает то же самое что и start, аналогично и flex-end и end.
Однако измените значение flex-direction на row-reverse и вы увидите разницу. При использовании row-reverse значения main-start и main-end меняются местми. main-start теперь находится справа, а main-end — слева. Однако это не изменяет направление текста, которое по-прежнему идет слева направо.
Теперь попробуйте различные значения для justify-content. Вы обнаружите, что это flex-end перемещает элементы влево flex контейнера. Используйте end и элементы перемещаются вправо контейнера.
Попробуйте демонстрацию ниже и установите для контейнера direction:rtl, чтобы увидеть, как изменение направления текста меняет принцип работы этих значений.
Если вы хотите, чтобы элемент выровнялся, как это определено в flex-direction, используйте flex-end. Чтобы выровнять его по краю контейнера, используйте end.
self-start и self-end по сравнению с start и end
В предыдущем примере вы видели, что start и end являются потокозависимыми и имеют отношение к направлению или режиму записи контейнера выравнивания. Значения self-start и self-end также потокозависимые, но они имеют отношение к режиму записи и направлению предмета выравнивания, в данном случае flex элемента.
Чтобы увидеть, как это работает, взгляните на следующую демонстрацию. Есть три flex элемента в контейнере, flex-direction которого равен column. Таким образом, поперечная ось проходит вдоль строки. Второй элемент имеет direction:rtl.
С align-items:start все элементы выстраиваются в линию слева, так как контейнер имеет направление слева направо. Однако измените это значение на align-items: self-start, и элемент номер два выровняется по концу flex контейнера — относительно началу потока.
Поэтому, если вы хотите, чтобы элемент соответствовал направлению или режиму записи контейнера выравнивания, используйте start и end. Чтобы соблюдать режим письма или направление объекта выравнивания, используйте self-start и self-end.
Автор: Rachel Andrew
Источник: csslayout.news
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен
