Как раскладывать ХТМЛ-элементы на странице. Часть вторая: флексбоксы

Василий Половнёв

В прошлый раз я рассказывал о раскладке флоатами и позиционированием. На смену этим методам пришли флексбоксы.

Флексбоксы — набор ЦСС-свойств для гибкой раскладки элементов. Это инструмент для раскладки и выравнивания элементов, более управляемый, чем флоаты и таблицы.

Чтобы включить флексбокс, нужно задать элементу 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>

В отдельном окне

Свойства flex-grow, flex-shrink, flex-basis и order управляют размерами и порядком отображения флекс-элементов. В следующем совете я расскажу о них и о том, как они помогают с вёрсткой каталогов и выдачи.

Что дальше

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

Ваш комментарий		Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа. Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным. Вот такой веб 2.0.

Имя и фамилия	обязательны полностью для публикации комментария
Электронная почта	адрес не будет опубликован
Ваши соображения
Иллюстрация	гиф или джипег шириной не более 700 пикселей

Что дальше

Комментарии

Ваш комментарий

Недавно всплыло