Объясняем работу Flexbox-лейаутов с помощью больших разноцветных гифок

В данной статье представлены пять самых распространённых свойств Flexbox-лейаутов, поняв работу которых, вы больше не будете использовать традиционный CSS.

Flexbox-лейауты предостерегают нас от вредных вещей обычного CSS (таких, как вертикальное выравнивание). Итак, Flexbox-лейауты избавляют нас от этого, но освоение данной ментальной модели может быть затруднительно. Поэтому давайте посмотрим, как работают Flexbox-лейауты на наших анимированных примерах, поняв их работу, мы сможем создавать лучшие лейауты.

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

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

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

Пример нашей веб-страницы:

У нас есть 4 разноцветных div блока разного размера, расположенных внутри серого div контейнера. На данный момент каждый div блок имеет дефолтное свойство display: block, таким образом, каждый квадрат занимает всю ширину своей линии.

Для начала работы с Flexbox-лейаутами нужно превратить обычный контейнер в гибкий контейнер. Сделать это легко:

#container {
display: flex;
}

Теперь наши div блоки расположены в одну линию, изменилось немногое, но мы сделали достаточно серьезную вещь. Мы сделали то, что называется гибким контекстом.

Теперь вы можете начать размещение блоков внутри данного контекста с меньшими трудностями по сравнению с традиционным CSS.

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

Flexbox-контейнер имеет две оси: основную ось и поперечную ось, которые по умолчанию выглядят так:

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

Как бы то ни было, свойство Flex-direction позволяет нам вращать основную ось:

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

Интересный CSS эффект, правда?

Существует очень важная особенность, из-за которой мы здесь применили flex-direction: column.

Данное свойство позволяет выравнивать элементы вдоль поперечной оси вместо основной, что позволяет основной оси автоматически меняться на поперечную.

Также существует пара других опций для данного свойства, такие как row-reverse и column-reverse.

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

Свойство Justify Content отвечает за выравнивание элементов на основной оси. Давайте внимательно разберем различие между поперечной и основной осью. Во-первых, давайте вернемся назад к свойству flex-direction: row.

#container {
display: flex;
flex-direction: row;
justify-content: flex-start;
}

В нашем распоряжении имеется пять команд для управления данным свойством:

1. flex-start
2. flex-end
3. center
4. space-between
5. space-around

Команды space-between и space-around наименее интуитивно понятны. Space-between предоставляет равное пространство между квадратами, но не между квадратами и контейнером. Space-around обеспечивает каждый квадрат бортами, которые равняются расстоянию между центрами квадратов и контейнером, что вдвое меньше, чем расстояние между двумя квадратами (каждый квадрат жертвует равный не накладывающийся отступ, таким образом удваивая пространство).

Последнее замечание: запомните, что свойство justify-content работает вдоль основной оси, а свойство flex-direction меняет оси местами.

Свойство #4: Align Items

При использовании свойства justify-content происходит смещение выравненных элементов.

Свойство justify-content работает с основной осью, а свойство align-items применяется к поперечной оси.

Давайте установим свойство flex-direction: row таким образом, чтобы наши оси выглядели так же, как на изображении выше.

Свойство align-items имеет 5 команд:

1. flex-start
2. flex-end
3. center
4. stretch
5. baseline

Первые три команды точно такие же, как у свойства justify-content, поэтому ничего сложного в них нет. Однако две другие немного отличаются. Свойство stretch полностью растягивает элемент вдоль поперечной оси, а свойство baseline производит выравнивание по нижней границе тега <p>.

Обратите внимание, что для свойства align-items: stretch я установил автоматическое определение высоты квадрата (height: auto), иначе произойдет переопределение свойства stretch. Также при использовании свойства baseline нужно знать, что если вы уберете, тег <p>, то вместо выравнивания по нижней границе данного тега произойдет выравнивание по нижней части квадратов, так, как показано на данном рисунке:

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

Для команды row квадраты располагаются вдоль основной горизонтальной оси, а для column - вдоль вертикальной поперечной оси. Даже если элементы отцентрированы вдоль вертикальной и горизонтальной оси, они все равно не являются равнозначными!

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

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

#container {
align-items: flex-start;
}
.square#one {
align-self: center;
}
// Только этот квадрат будет отцентрирован.

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

Заключение

Несмотря на то, что мы просто собрали полезную информацию о Flexbox-лейаутах, данных команд должно быть достаточно для управления основными моментами выравнивания, а также для вертикального выравнивания вашего основного контента.

Другие статьи по теме

• Еще больше о Flexbox-лейаутах в больших разноцветных гифках
• Подборка материалов по HTML и CSS
• Путь веб-разработчика в 2017

Спасибо за прочтение!

Ссылка на оригинальную статью
Перевод: Александр Давыдов