Флексбокс «на пальцах»
Перенос элементов
Вкратце напомню о флекс‑контейнере и флекс‑элементах. Флексбокс — это набор ЦСС‑свойств для гибкой раскладки элементов на странице или в отдельном блоке. Чтобы включить флексбокс, нужно задать элементу display: flex. Тогда элемент станет флекс‑контейнером, а все вложенные в него элементы станут флекс‑элементами.
Флексбокс «на пальцах»
Перенос элементов
По умолчанию элементы внутри флекс‑контейнера раскладываются в одну строку. Если окажется, что элементам не хватает места, они переполнят его:
<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>.numbers {
/* Включаем флексбокс */
display: flex;
/* Настраиваем направление раскладки */
flex-direction: row;
/* Прижимаем элементы к началу
главной оси */
justify-content: flex-start;
/* Прижимаем элементы к началу
поперечной оси */
align-items: flex-start;
}Чтобы сделать флекс‑контейнер многострочным, используем flex-wrap: wrap или flex-wrap: wrap-reverse:
flex‑wrap: wrap
flex‑wrap: wrap‑reverse
flex-wrap: wrap-reverse раскладывает невмещающиеся элементы в направлении, противоположном поперечной оси: снизу вверхПри смене направления главной оси:
flex‑direction: column и flex‑wrap: wrap
flex‑direction: column и flex‑wrap: wrap‑reverse
flex‑direction: column и flex‑wrap: wrap
flex‑direction: column и flex‑wrap: wrap‑reverse
flex-wrap: wrap-reverse раскладывает невмещающиеся элементы справа налевоВажный момент. За расположение элементов на поперечной оси отвечает свойство align-items. В многострочных контейнерах оно работает внутри строк, а для управления расстоянием между строк используется align-content:
align‑content: stretch
align‑content: center
align‑content: flex‑start
align‑content: flex‑end
align‑content: space‑around
align‑content: space‑between
align-content: stretch. С ним строки делят доступное пространство поровнуВ примерах выше расстояние между элементами задано с помощью margin, что даёт дополнительные отступы до и после всех элементов. Чтобы не обнулять и не компенсировать их соседними элементами, лучше задавать отступы с помощью gap:
margin: 10px
gap: 20px
gap задаёт отступ между элементами, а не вокруг них. Указывается в контейнере, а не у самих элементовПеренос во флексбоксе обычно используют для адаптивных колонок или набора элементов, которым не важна сетка. Например, для вёрстки облака тегов или вариантов ответа в чате:
<ul class="replies">
<li>Иди лесом</li>
<li>Иди опушкой</li>
<li>Нет!</li>
<li>Позови человека</li>
<li>Не хотелось бы хвастаться. Давайте лучше обсудим вашу задачу</li>
<li>Нет, благодарю. Я готов начинать</li>
</ul>
.replies {
/* Включаем флексбокс */
display: flex;
/* Указываем направление главной оси:
раскладка сверху вниз */
flex-direction: row;
justify-content: flex-end;
/* Указываем направление на поперечной оси:
прижимаем строки вверх */
align-content: flex-start;
/* Включаем переносы */
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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.