Флексбокс — это набор ЦСС‑свойств для гибкой раскладки элементов на странице или в отдельном блоке.
Чтобы включить флексбокс, нужно задать элементу display: flex. Тогда элемент станет флекс‑контейнером, а все вложенные в него элементы станут флекс‑элементами.
<div class="columns">
<div>Первая колонка</div>
<div>Вторая колонка</div>
</div>
<style>
.columns {
/* Включаем флексбокс */
display: flex;
/* Настраиваем направление
и способ раскладки */
flex-direction: row;
justify-content: space-between;
}
</style>
Относитесь к флекс‑контейнеру, как к прямоугольному формату, внутри которого можно расположить несколько элементов по строкам или колонкам, выровняв их по одной из сторон или распределив по формату.
Ключевая идея раскладки флексбоксами — введение главной и поперечной осей, по которым и будут раскладываться флекс‑элементы:
Главная ось →
Поперечная ось →
Серая область — флекс‑контейнер, «кубики» внутри — флекс‑элементы
За направление главной оси отвечает свойство flex-direction. Если элементы нужно разложить слева направо, используем flex-direction: row; если справа налево, то flex-direction: row-reverse. Если элементы нужно разложить сверху вниз, используем flex-direction: column; если снизу вверх, то flex-direction: column-reverse:
flex‑direction: row
flex‑direction: row‑reverse
flex‑direction: column
flex‑direction: column‑reverse
За расположение элементов на главной оси отвечает свойство justify-content. Если элементы нужно прижать к началу оси, используем justify-content: flex-start; если к концу, то justify-content: flex-end; если к центру, то justify-content: center:
justify‑content: flex‑start
justify‑content: flex‑end
justify‑content: center
Чтобы отжать первый и последний элемент к краям, а оставшееся место поделить, используем justify-content: space-between. Чтобы равномерно поделить место между всеми элементами, используем justify-content: space-around или justify-content: space-evenly:
justify‑content: space‑between
justify‑content: space‑around
justify‑content: space‑evenly
space‑around равномерно распределяет элементы по ширине таким образом, чтобы расстояние до краёв блока равнялось половине расстояния между элементами. space‑evenly распределяет элементы так, чтобы все расстояния были одинаковы
Поперечная ось идёт перпендикулярно главной. Соответственно, если главная ось идёт по горизонтали, то поперечная пройдёт по вертикали. И наоборот: если главная ось идёт по вертикали, поперечная пройдёт по горизонтали.
За расположение элементов на поперечной оси отвечает свойство align-items. Если элементы нужно растянуть на всю ось (поведение по умолчанию), используем align-items: stretch:
Если элементы на поперечной оси, нужно прижать к началу оси, используем align-items: flex-start; если к концу, то align-items: flex-end; если к центру, то align-items: center:
align‑items: flex‑start
align‑items: flex‑end
align‑items: center
Если элементы на поперечной оси, нужно выровнять по базовой, то используем align-items: baseline:
Все свойства, что мы рассмотрели выше, применяются ко флекс‑контейнеру и влияют на все элементы внутри него. Если отдельные элементы нужно расположить по‑особенному на поперечной оси, используют align-self в самих элементах:
align‑self: flex‑start
align‑self: flex‑end
align‑self: center
Всё самое интересное начинается, когда мы комбинируем раскладку по осям. Например, чтобы отцентрировать модуль по горизонтали и вертикали, нужно выровнять по центру флекс‑элементы по главной и поперечной оси:
justify‑content: center и align‑items: center
Таким образом можно любую сложную модульную вёрстку разбить на вложенные друг в друга флекс‑контейнеры с собственным ритмом элементов:
<header>...</header>
<main>
<aside>...</aside>
<article>...</article>
<aside>...</aside>
</main>
<style>
header,
main,
aside {
/* Превращаем шапку, содержимое
и сайдбары во флекс-контейнеры */
display: flex;
}
header {
/* В шапке раскладываем элементы
слева направо */
flex-direction: row;
}
aside {
/* В левом сайдбаре раскладываем
элементы сверху вниз */
flex-direction: column;
justify-content: flex-start;
}
aside:last-child {
/* В правом сайдбаре равномерно
распределяем элементы */
justify-content: space-between;
}
</style>В следующем совете я расскажу, как управлять раскладкой элементов, когда они не помещаются в одну строку, их размерами и порядком.
Что запомнить
Флексбокс — это набор ЦСС‑свойств для гибкой раскладки элементов в каком‑то контейнере. Чтобы включить флексбокс, используем display: flex у контейнера.
Внутри флекс‑контейнера элементы раскладываются по двум осям. Главная ось определяет направление раскладки (слева направо, справа налево, сверху вниз или снизу вверх). Её направление задаётся с помощью flex-direction. Поперечная ось идёт перпендикулярно главной и используется для выравнивания элементов на ней.
Выравнивание по главной оси задаётся с помощью justify-content, по поперечной — с помощью align-items.
Ещё по теме
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.