В прошлый раз я рассказывал о раскладке флоатами и позиционированием. На смену этим методам пришли флексбоксы.
Флексбоксы — набор ЦСС‑свойств для гибкой раскладки элементов. Это инструмент для раскладки и выравнивания элементов, более управляемый, чем флоаты и таблицы.
Чтобы включить флексбокс, нужно задать элементу display: flex. Тогда элемент станет флекс‑контейнером, а все вложенные в него элементы станут флекс‑элементами.
Относитесь к флекс‑контейнеру, как к прямоугольному формату, внутри которого можно расположить несколько элементов по строкам или колонкам, выровняв их по одной из сторон или распределив по формату.
ЦСС‑свойства флекс‑контейнера управляют направлением (flex-direction), расположением (justify-content) и переносом (flex-wrap) вложенных элементов.
Таким образом можно любую сложную модульную вёрстку разбить на вложенные друг в друга флекс‑контейнеры с собственным ритмом элементов.
Соберём четырёхколоночную сетку из «Типографики и вёрстки»:
<style>
.row {
/*
* .row — флекс-контейнер, этаж сетки.
*/
display: flex;
/*
* Флекс-элементы будут раскладываться
* слева направо.
*/
flex-direction: row;
/*
* Прижимаем флекс-элементы к левому краю.
*/
justify-content: flex-start;
/*
* Если места для элементов не хватает,
* запрещаем их перенос на следующую строку.
*/
flex-wrap: nowrap;
}
/*
* Флекс-элементы на одну, две, три
* и четыре колонки.
*/
.col-1,
.col-2,
.col-3,
.col-4 {
/*
* flex-grow определяет насколько элемент
* будет больше своих соседей.
* Элемент с flex-grow: 1 займёт
* всю ширину контейнера,
* два элемента с flex-grow: 1 поделят
* контейнера пополам.
*
* flex-grow: 0 не даёт элементу
* растягиваться больше указанного размера.
*/
flex-grow: 0;
/*
* flex-shrink определяет насколько сильно
* элемент будет уменьшатся, если
* во флекс-контейнере не хватит места.
*/
flex-shrink: 0;
/*
* Задаём колонкам внутренние отступы
* по умолчанию.
*/
box-sizing: border-box;
padding-right: 20px;
}
.col-1 {
/*
* flex-basis задаёт начальный размер
* элемента до того, как он начнёт тянуться
* в соответствии с flex-grow.
*/
flex-basis: 25%;
max-width: 25%;
}
.col-2 {
flex-basis: 50%;
max-width: 50%;
}
.col-3 {
flex-basis: 75%;
max-width: 75%;
}
.col-4 {
flex-basis: 100%;
max-width: 100%;
}
</style><div class="row">
<div class="col-4">
<!-- Колонка на всю ширину страницы -->
</div>
</div>
<div class="row">
<div class="col-3">
<!-- Колонка на три четверти страницы -->
</div>
<div class="col-1">
<!-- Колонка на четверть страницы -->
</div>
</div>
<div class="row">
<div class="col-1">
<!-- Колонка на четверть страницы -->
</div>
<div class="col-1"></div>
<div class="col-1"></div>
<div class="col-1"></div>
</div>Свойства order управляют размерами и порядком отображения флекс‑элементов. В следующем совете я расскажу о них и о том, как они помогают с вёрсткой каталогов и выдачи.
Что дальше
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.