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

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

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

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

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