Флексбокс — это набор ЦСС‑свойств для гибкой раскладки элементов на странице или в отдельном блоке.

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

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы