Как выучить CSS Flexbox за 3 минуты

В этой статье Вы узнаете самые важные концепции flexbox в CSS, которая сделает Вашу жизнь намного проще, если Вы время от времени боретесь с разметкой в CSS.

Мы сосредоточимся только на основных принципах, опустив при этом то, о чём Вы не должны даже беспокоиться, пока не поймёте основы.

1. Контейнер (container) и элемент (item)

Двумя основными компонентами разметки flexbox являются контейнер (отмечен синим) и элементы (отмечены красным). В примере, рассматриваемом в статье, и контейнер и элементы являются div-ами. Взгляните на этот код, если интересно.

Горизонтальная разметка

Чтобы создать гибкую разметку, просто примените к контейнеру следующее CSS-свойство.

.container {
    display: flex;
}

Что приведет к такому расположению элементов:

Обратите внимание на то, что Вам не нужно ничего делать с элементами. Они будут автоматически расположены вдоль горизонтальной оси.

Вертикальная разметка

В приведённой выше разметке, главная ось является горизонтальной, а поперечная ось является вертикальной. Концепцию осей важно понять для правильного использования flex.

Вы можете поменять местами две оси, добавив свойство flex-direction: column.

.container {
    display: flex;
    flex-direction: column;
}

Теперь главная ось — вертикальная, а поперечная ось расположена по горизонтали, в результате чего элементы расположились по вертикали.

2. Выравнивание контента и расположение элементов

Чтобы снова поместить список в горизонтальное положение, мы можем изменить flex-direction от column к row, так как это вернёт оси в предыдущее состояние.

Причина, по которой важно понимать оси, заключается в том, что атрибуты justify-content и align-items контролируют, как элементы расположены вдоль главной и поперечной оси соответственно.

Давайте поместим все элементы в центр вдоль главной оси с помощью justify-content:

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

И давайте выравняем их вдоль поперечной оси, используя align-items.

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

Ниже приведены другие значения, которые можно использовать для justify-content иalign-items :

justify-content:

• flex-start (default)
• flex-end
• center
• space-between
• space-around

align-items:

• flex-start (default)
• flex-end
• center
• baseline
• stretch

Мы рекомендуем попробовать разные свойства justify-content и align-items и их комбинации с flex-direction (используя и column, и row). Это должно дать вам правильное понимание концепции.

3. Элементы

Последнее, о чём мы узнаем, — это сами элементы, а также то, как добавлять определённые стили к каждому из них.

Допустим, мы хотим выровнять позицию первого элемента. Мы можем сделать это, использую CSS-свойство align-self, которое принимает те же значения, что и align-items:

.item1 {
  align-self: flex-end;
}

В результате получаем такую разметку:

Вот и всё!

Конечно же, есть ещё куча вещей, которые предоставляет flexbox, но основные концепции, представленные выше, — та основа, которая используется чаще всего. И именно её важно правильно понимать.