Одна из самых распространенных проблем в адаптивном веб-дизайне — проблема «висячей строки». Легко расположить элементы примерно одинакового размера в одну строку, когда на это хватает места:

Но когда окно браузера сужается, последний элемент не помещается на строку и падает вниз, оставаясь в одиночестве:

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

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

<header>
        <div><img src="image1.jpg" alt></div>
        <div><img src="image2.jpg" alt></div>
        …
</header>

Лучше поместить каждое изображение в блочный элемент из-за особенности работы некоторых версий браузера Firefox при масштабировании изображений с использованием Flexbox.

После этого запишем следующий код CSS только с помощью нового синтаксиса, ради ясности и краткости:

header {
        font-size: 0;
        display: flex;
        flex-flow: row wrap;
}
header > * {
        flex: auto;
        width: 200px;
}
header > * img {
        width: 100%;
        height: auto;
}

Как видите на примере выше, при изменении размеров окна браузера проблема с расположением изображений решена изящно: изображение, которое оттолкнулось на новую строку, займет на ней ширину, равную ширине верхней строки. Если к этому изображению присоединится следующее при сужении окна, они поделят размер строки пополам.

Можно считать ширину блочного элемента в коде CSS минимальной шириной: когда блоки, которые должны быть шириной хотя бы 200px, не влазят на строку все вместе, один отталкивается на следующую строку, чтобы остальным хватило места.

Такой подход хорошо подойдет и для не графических элементов разной высоты и различных пропорций.

Использована фотография Jeremiah Wilson, лицензированная по лицензии Creative Commons.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Анимированные галереи изображений с использованием CSS3: эффекты плавного появления и прокрутки
• Галерея изображений с помощью свойства CSS object-fit: уменьшенное и полное изображения в одном файле
• Создание эффекта уменьшения фотографии с использованием jQuery