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

Anastasia A.
3 min readSep 16, 2016

В этой статье Вы узнаете самые важные концепции 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, но основные концепции, представленные выше, — та основа, которая используется чаще всего. И именно её важно правильно понимать.

--

--

Anastasia A.

I am a web-developer and a little bit a translator