Глава 6.1.6. Использование свойства flex-grow для создания «адаптивности от контейнера»

Помимо всего прочего, флекс умеет делать красивое заполнение строк флекс-элементами так, чтобы в каждой строке края флекс-элементов вплотную прилегали к краям контейнера. И работает этот механизм как для фиксированных так и для резиновых контейнеров. Такое поведение возможно благодаря сочетанию flex-wrap: wrap и положительного значения flex-grow.

Красивое заполнение строк флекс-элементами. Сочетание свойств flex-wrap: wrap, flex-grow: 1 и фиксированного базового размера

Алгоритм заполнения строк состоит из следующих шагов:

· по исходным базовым размерам флекс-элементов браузер определяет, сколько будет флекс-элементов в каждой флекс-строке;

· после распределения флекс-элементов по флекс-строкам для элементов с положительным значением flex-grow включаются гибкие размеры и такие элементы «съедают» свободное пространство в своей строке пропорционально значению свойства flex-grow.

Причём этот алгоритм работает как для однострочных, так и для многострочных флекс-контейнеров.

Разберём всё на схемах. И начнём с простого примера, все элементы имеют значение flex-grow: 1.

Распределение свободного пространства между флекс-элементами

Как видите, все элементы получили равное дополнение к базовому размеру и заполнили всю ширину флекс-контейнера.

В следующем примере мы имеем дело с многострочным флекс-контейнером, мы разрешили перенос флекс-элементов на следующую строку flex-wrap: wrap. В первой строке находятся два элемента, третий элемент переходит на вторую строку. Установим для всех элементов значение свойства flex-grow: 1. После этого элементы первой строки делят свободное пространство только первой строки, несильно увеличиваясь в размерах. А элементу во второй строке достаётся больше свободного пространства, поскольку он в строке всего один.

Порядок применения flex-grow при flex-wrap: wrap

Иногда сочетание flex-wrap: wrap с положительным flex-grow называют «адаптивностью от контейнера». Ведь при изменении ширины контейнера сетка может достаточно сильно перестраиваться. Но это не полноценная адаптивность, а просто один из возможных приёмов перестроения сетки в ситуации, когда не важен точный контроль размеров и пропорций.

«Адаптивность от контейнера»

Рассмотрим как можно использовать этот механизм при построении сеток для разделов сайта.

Задача построить сетку для раздела с галереей фотографий. Исходные файлы фотографий имеют два типа размеров: 570x320 и 285x320. По макету необходимо, чтобы между фотографиями не было отступов, а также чтобы они занимали всю ширину контейнера. Контейнер имеет фиксированную ширину 1200px.

Разметки и стили для раздела могут выглядеть так:

<div class="container">

<ul class="gallery-list">

<li class="gallery-item gallery-item-big">

<img class="gallery-item-img" src="img/photo-13.jpg" height="320" alt="Фотографии с круизов">

</li>

<li class="gallery-item">

<img class="gallery-item-img" src="img/photo-23.jpg" height="320" alt="Фотографии с круизов">

</li>

<li class="gallery-item">

<img class="gallery-item-img" src="img/photo-37.jpg" height="320" alt="Фотографии с круизов">

</li>

<li class="gallery-item">

  <img class="gallery-item-img" src="img/photo-53.jpg" height="320" alt="Фотографии с круизов">

</li>

<li class="gallery-item">

  <img class="gallery-item-img" src="img/photo-17.jpg" height="320" alt="Фотографии с круизов">

</li>

<li class="gallery-item gallery-item-big">

  <img class="gallery-item-img" src="img/photo-14.jpg" height="320" alt="Фотографии с круизов">

</li>

</ul>

</div>

 

/* стили для контейнера с фотографиями */

.container {

width: 1200px;

…

}

 

/* стили для списка фотографий */

.gallery-list {

padding: 0;

margin: 0;

list-style: none;

 

display: flex;

flex-wrap: wrap;

}

 

/* стили для отдельного элемента списка */

.gallery-item {

display: flex;

}

Галерея с исходным размером изображений

Как видите, справа у контейнера с фотографиями осталось свободное место.

Попробуем заполнить свободное пространство используя flex-grow: 1. Добавим это свойство для флекс-элементов:

.gallery-item {

display: flex;

flex-grow: 1;

}

Сетка для галереи с flex-grow: 1

Замечание

Блоки растянулись на всю ширину контейнера. Но вы, наверное, обратили внимание, что сетка немного сломалась. Нет чётких колонок, как в исходном состоянии. Это произошло из-за того, что изначальные размеры элементов отличаются. В нашем случае ширина первого типа элементов в два раза больше, чем ширина второго типа элементов. Поэтому лучше свободное пространство поделить в этих же пропорциях. То есть для элементов меньшего размера задать flex-grow: 1, а для большего — flex-grow: 2.

…

 

/* стили для элементов меньшего размера */

.gallery-item {

display: flex;

flex-grow: 1;

}

 

/* стили для элементов большего размера */

.gallery-item-big {

flex-grow: 2;

}

В результате получим:

Сетка для галереи с разными значениями свойства flex-grow

Мы растянули элементы галереи на всю ширину контейнера и сохранили колонки для сетки.

Итоговые CSS-правила для нашей галереи могут выглядеть так:

/* стили для контейнера с фотографиями */

.container {

width: 1200px;

…

}

 

/* стили для списка фотографий */

.gallery-list {

padding: 0;

margin: 0;

list-style: none;

 

display: flex;

flex-wrap: wrap;

}

 

/* стили для элементов меньшего типа размеров */

.gallery-item {

display: flex;

flex-grow: 1;

}

 

/* стили для элементов большего типа размеров */

.gallery-item-big {

flex-grow: 2;

}

Теория~ 12 минут

Глава 6.2.1. Введение

Что такое сетка?

Сеткой или раскладкой обычно называют взаимное расположение крупных визуальных блоков на странице.

Можно мысленно разделить макет на не пересекающиеся друг с другом прямоугольники. Сначала вы получите самые крупные области, потом эти крупные области можно разделить на области поменьше, и так далее до мельчайших прямоугольников, которые выделяют отдельные слова или элементы страницы. Вся страница будет выглядеть как набор вложенных в друг друга прямоугольников, от самых крупных до самых мелких.

Схема страницы от крупных до мелких прямоугольников

Фактически вёрстка сетки сайта подразумевает выстраивание порядка и расположения этих прямоугольников друг относительно друга, а также относительно границ экрана. В CSS есть несколько методов создания такой сетки, и каждый из них обладает своими достоинствами и недостатками.

Прежде чем приступить к построению сеток, нам нужно разобраться, что такое поток документа.

Поток документа

Поток документа определяет, как именно элементы отрисовываются на веб-странице и как этот порядок отрисовки соотносится с HTML-кодом.

Вот пример HTML-кода:

<body> <header> </header> <main> <div class="column1"></div> <div class="column2"></div> <div class="column3"></div> </main> <footer> </footer></body>

Схема того, как этот код отображается на странице:

Сетка страницы, описанной кодом выше

Все элементы расположены ровно в том же порядке, в котором они были в коде.

Теги в потоке документа «видят» друг друга, а если быть точнее, то каждый последующий тег «видит» предыдущий (но не наоборот). Теги друг друга отталкивают. Если расположенный выше элемент увеличить по высоте, то он оттолкнёт все нижележащие элементы.

Мы можем управлять потоком с помощью различных CSS-свойств, изменять размеры элементов или даже изменять направление течения потока. Рассмотрим другой вариант потока для этой же разметки. Поток «течёт» как обычно сверху вниз, потом «поворачивает» слева направо, а потом снова идёт вниз:

Другой вариант сетки страницы

Те же самые элементы можно выстроить в поток с тремя колонками:

Другой вариант сетки страницы

Мы получили три варианта потока, а при этом исходный HTML-код не менялся.

Управление потоком

Для управления потоком в нашем распоряжении есть две группы CSS-свойств. Разделение достаточно условное, но можно сказать, что первая группа меняет поведение элементов в потоке, а вторая группа свойств меняет размеры самих элементов.

К первой группе относятся свойства display, float.

По вторую группу входят свойства width, height, margin, padding, border, box-sizing.