Flex start (или align-items: flex-start
) — это одно из значений свойства align-items
, которое определяет выравнивание флекс-элементов по главной оси контейнера.
При использовании значения align-items: flex-start
флекс-элементы будут выровнены по верхней границе главной оси контейнера. Если в контейнере есть флекс-элементы разной высоты, то верхняя граница каждого элемента будет выровнена по верхней границе контейнера.
Пример использования align-items: flex-start
:
.container {
display: flex;
align-items: flex-start;
}
В этом примере все флекс-элементы, находящиеся в контейнере с классом .container
, будут выровнены по верхней границе контейнера. Если флекс-элементы разной высоты, то их верхние границы будут выровнены по верхней границе контейнера.
Использование align-items: flex-start
полезно, например, при создании меню или списка, чтобы выровнять пункты меню/элементы списка по верхней границе и добиться более аккуратного внешнего вида и удобства использования.