В чем разница между значениями выравнивания start, flex-start и self-start?

0 0

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

flex-start и flex-end

start и end

self-start и self-end

В чем разница между значениями выравнивания start, flex-start и self-start?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Значения 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

В чем разница между значениями выравнивания start, flex-start и self-start?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Начало и конец поперечной оси.

Обратите внимание, что кроме 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

Источник: webformyself.com

Оставьте ответ