Флексбокс «на пальцах»

Вкратце напомню о флекс‑контейнере и флекс‑элементах. Флексбокс — это набор ЦСС‑свойств для гибкой раскладки элементов на странице или в отдельном блоке. Чтобы включить флексбокс, нужно задать элементу display: flex. Тогда элемент станет флекс‑контейнером, а все вложенные в него элементы станут флекс‑элементами.

Флексбокс «на пальцах»

По умолчанию элементы внутри флекс‑контейнера раскладываются в одну строку. Если окажется, что элементам не хватает места, они переполнят его:

index.html
<ul class="numbers">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>
style.css
.numbers {
  /* Включаем флексбокс */
  display: flex;
  /* Настраиваем направление раскладки */
  flex-direction: row;
  /* Прижимаем элементы к началу
     главной оси */
  justify-content: flex-start;
  /* Прижимаем элементы к началу 
     поперечной оси */
  align-items: flex-start;
}
 
1
2
3
4
5
6
7
8
9

Чтобы сделать флекс‑контейнер многострочным, используем flex-wrap: wrap или flex-wrap: wrap-reverse:

flex‑wrap: wrap

1
2
3
4
5
6
7
8
9

flex‑wrap: wrap‑reverse

1
2
3
4
5
6
7
8
9
flex-wrap: wrap-reverse раскладывает невмещающиеся элементы в направлении, противоположном поперечной оси: снизу вверх

При смене направления главной оси:

flex‑direction: column и flex‑wrap: wrap

flex‑direction: column и flex‑wrap: wrap‑reverse

1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

flex‑direction: column и flex‑wrap: wrap

1
2
3
4
5
6
7
8
9

flex‑direction: column и flex‑wrap: wrap‑reverse

1
2
3
4
5
6
7
8
9
Из‑за смены направления flex-wrap: wrap-reverse раскладывает невмещающиеся элементы справа налево

Важный момент. За расположение элементов на поперечной оси отвечает свойство align-items. В многострочных контейнерах оно работает внутри строк, а для управления расстоянием между строк используется align-content:

align‑content: stretch

1
2
3
4
5
6
7
8
9

align‑content: center

1
2
3
4
5
6
7
8
9

align‑content: flex‑start

1
2
3
4
5
6
7
8
9

align‑content: flex‑end

1
2
3
4
5
6
7
8
9

align‑content: space‑around

1
2
3
4
5
6
7
8
9

align‑content: space‑between

1
2
3
4
5
6
7
8
9
Значение по умолчанию — align-content: stretch. С ним строки делят доступное пространство поровну

В примерах выше расстояние между элементами задано с помощью margin, что даёт дополнительные отступы до и после всех элементов. Чтобы не обнулять и не компенсировать их соседними элементами, лучше задавать отступы с помощью gap:

margin: 10px

1
2
3
4
5
6
7
8
9

gap: 20px

1
2
3
4
5
6
7
8
9
gap задаёт отступ между элементами, а не вокруг них. Указывается в контейнере, а не у самих элементов

Перенос во флексбоксе обычно используют для адаптивных колонок или набора элементов, которым не важна сетка. Например, для вёрстки облака тегов или вариантов ответа в чате:

index.html
<ul class="replies">
  <li>Иди лесом</li>
  <li>Иди опушкой</li>
  <li>Нет!</li>
  <li>Позови человека</li>
  <li>Не хотелось бы хвастаться. Давайте лучше обсудим вашу задачу</li>
  <li>Нет, благодарю. Я готов начинать</li>
</ul>
style.css
.replies {
  /* Включаем флексбокс */
  display: flex;
  /* Указываем направление главной оси:
     раскладка сверху вниз */
  flex-direction: row;
  /* Указываем направление на поперечной оси:
     прижимаем элементы вправо */
  align-items: flex-end;
  /* Включаем переносы */
  flex-wrap: wrap;
  /* Задаём отступ между элементами */
  gap: 10px;
}
/* Настраиваем варианты ответов */
.reply {
  padding: 10px 20px;
  border-radius: 25px;
  border: 1px solid #0b93f6;
  font: 18px/24px Helvetica Neue, Helvetica, Arial, sans-serif;
}
.reply:hover {
  background: #0b93f6;
  color: #fff;
}
Иди лесом
Иди опушкой
Нет
Позови человека
Не хотелось бы хвастаться. Давайте лучше обсудим вашу задачу
Нет, благодарю. Я готов начинать

Что запомнить

По умолчанию флекс‑контейнер однострочный: невмещающиеся элементы переполняют его. Чтобы сделать его многострочным и разрешить перенос элементов, используют flex-wrap: wrap

За расположение «строк» элементов по поперечной оси в многострочных контейнерах отвечает align-content

Чтобы задать отступ между перенесёнными элементами, лучше использовать gap

Ещё по теме

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Запинить

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