Как работает Flexbox: объясняем на гифках

Свeтлaнa Шaпoвaлoвa, кoммeрчeский aвтoр и пeрeвoдчик, спeциaльнo для «Нeтoлoгии» пeрeвeлa стaтью Скoттa Дoмeсa, в кoтoрoй oн с пoмoщью нaглядныx гифoк рaсскaзывaeт oб oснoвныx свoйствax Flexbox.

Flexbox обещает спасти нас от мук привычного CSS: например, от вертикального выравнивания. Что ж, с заявленной целью он справляется. Однако не всегда получается приноровиться к нему с первой попытки.

Чтобы верстать качественнее, изучим Flexbox с помощью анимации.

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

Звучит неплохо — проверим это на практике.

В этой статье мы рассмотрели 5 главных свойств Flexbox: как они работают, как их правильно использовать и как должен выглядеть конечный результат.

Свойство №1: Display: Flex

Например, у нас есть страница:

Серый контейнер содержит четыре разноцветных блока разного размера. Сейчас они расположены по умолчанию display: block. При этом каждый прямоугольник занимает всю строку. Чтобы начать работу с Flexbox, необходимо превратить серый контейнер в flex-контейнер. Это очень просто:

#container {

display: flex;

}

Изменилось не так много — блоки все также расположены друг за другом -, но это лишь на первый взгляд. На самом деле сделано намного больше — у блоков появилось свойство flex-контекстом. Оно позволит управлять ими проще, чем с помощью привычного CSS.

Свойство №2: Flex Direction

У Flexbox-контейнера две оси — основная и поперечная. По умолчанию это выглядит так:

По умолчанию любые элементы располагаются слева направо вдоль основной оси. Именно поэтому прямоугольники выстроились в горизонтальную линию, как только мы применили свойство display: flex.

Свойство flex-direction в свою очередь позволяет вращать основную ось.

#container {

display: flex;

flex-direction: column;

}

Важно учесть следующее: свойство flex-direction: column не выстраивает прямоугольники вдоль поперечной оси. Вместо этого основная ось просто из горизонтальной становится вертикальной. Кроме значение column свойства flex-direction может также принимать значения row-reverse и column-reverse.

Свойство №3: Justify Content

Justify-content контролирует выравнивание элементов вдоль основной оси. Здесь стоит глубже рассмотреть различия между основной/поперечной осями. Для начала установим flex-direction: row.

#container {

display: flex;

flex-direction: row;

justify-content: flex-start;

}

Существует пять значений для justify-content:

  • Flex-start
  • Flex-end
  • Center
  • Space-between
  • Space-around
  • Из этого списка space-around и space-between наименее очевидны. Space-between придает равное расстояние между каждым прямоугольником, но не берет в расчет основной контейнер, как это делает space-around.

    Space-around облекает каждый прямоугольник равными отступами. Это означает, что пространство между крайними прямоугольниками и контейнером в два раза меньше пространства между двумя прямоугольниками — так происходит из-за того, что отступы не накладываются друг на друга, а суммируются.

    И наконец, не забывайте, что justify-content выравнивает элементы вдоль основной оси, а flex-direction поворачивает ее. Это будет важным, когда вы приступите к…

    …свойству №4: Align Items

    Если вы справились с justify-content, освоить align-items будет несложно.

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

    Переключим flex-direction в значение row — теперь оси расположены, как показано на рисунке. Идем дальше — аlign-items может принимать значения:

  • flex-start
  • flex-end
  • center
  • stretch
  • baseline
  • Первые три аналогичны таким же значениям для justify-content, ничего сверхъестественного. Оставшиеся же отличаются.

    Есть значение stretch: элементы равномерно вытягиватся вдоль поперечной оси; значение baseline выравнивает все элементы вдоль общей линии.

    Обратите внимание, что для align-items: stretch высота прямоугольников задана как auto. В противном случае она переопределяет растяжение.

    Используя значение baseline, обратите внимание на теги абзацев — если убрать, то выравниваться будут основания прямоугольников.

    Чтобы лучше проиллюстрировать основную и поперечную оси, совместим justify-content и align-items, и увидим, как работает центрирование для каждого значения flex-direction:

    Со значением row прямоугольники выстраиваются вдоль горизонтальной основной оси. Значение column заставляет их равняться по вертикальной основной оси.

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

    Свойство №5: Align Self

    Align-self позволяет вручную выравнивать отдельные элементы — управляя позиционированием каждого отдельного прямоугольника. Все свойства остаются прежними, при этом они по умолчанию выставлены как auto, поэтому наследуются значения align-items контейнера.

    #container {

    align-items: flex-start;

    }

    .square#one {

    align-self: center;

    }

    // Only this square will be centered.

    Посмотрим, как это выглядит. К двум прямоугольникам мы применили align-self, к остальным — align-items: center и flex-direction: row.

    Вывод

    Хотя мы сделали лишь беглый обзор некоторых свойств Flexbox, этого вам хватит, чтобы разобраться в основах выравнивания — и научиться вертикально выравнивать контент.

    Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

    Комментирование и размещение ссылок запрещено.

    Комментарии закрыты.