24.09.2021

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

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

От создателя: в этом посте вы узнаете разницу меж значениями выравнивания 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 контейнер (контейнер выравнивания) с 2-мя 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.

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *