Флексбокс — это набор ЦСС‑свойств для гибкой раскладки элементов на странице или в отдельном блоке.
Чтобы включить флексбокс, нужно задать элементу 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
Поперечная ось идёт перпендикулярно главной. Соответственно, если главная ось идёт по горизонтали, то поперечная пройдёт по вертикали. И наоборот: если главная ось идёт по вертикали, поперечная пройдёт по горизонтали.
За расположение элементов на поперечной оси отвечает свойство 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.