В данной статье мы рассмотрим использование модели CSS Flex Box, предназначенной для дизайна пользовательского интерфейса в браузере. В этой модели дети контейнера flex (гибкий) могут располагаться в любом направлении, адаптируя свои размеры: расти, чтобы занять неиспользуемое место или сжиматься, чтобы предотвратить переполнение родительского элемента. Можно легко перемещать детей по вертикальной и горизонтальной оси. Возможность вложения контейнеров flex друг в друга (по горизонтальной оси внутри вертикальной и наоборот) позволяет создавать макеты в двух измерениях.

В CSS 2.1 есть 4 режима разметки — алгоритма, определяющего размер и позиции элементов на основе их отношений с соседними элементами:

блочная (block) разметка, спроектированная для документов;
inline разметка для текста;
табличная (table) разметка для 2D данных в табличном формате;
позиционная (positioned) разметка для явного позиционирования элементов без учета других в документе.

Этот модуль предоставляет новый режим разметки flex, спроектированный для сложных приложений и веб-страниц.

Обзор

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

Содержимое контейнера flex:

может быть размещено в любом направлении (flow direction) (слева направо, справа налево, снизу вверх, сверху вниз).
может иметь обратный (reversed) или переставленный (rearranged) порядок отображения на уровне стиля (визуальный порядок может не зависеть от источника).
может быть размещено линейно вдоль единой (основной, main) оси или обернуто (wrapped) во множество строк вокруг вторичной (cross) оси;
может изменять свои размеры в зависимости от доступного пространства;
может быть выровнено по отношению к родительскому контейнеру или к соседним;
может быть динамически сжато и разжато по основной (main) оси, сохраняя размер контейнера по вторичной (cross) оси.

Пример 1

В этом примере каталога каждый элемент имеет название, фотографию, описание и кнопку заказа. Каждый элемент имеет одинаковый размер, фотография над текстом, кнопка покупки выровнена в нижней части элемента вне зависимости от длины описания элемента.

Разметка Flex помогает в следующих аспектах дизайна:

каталог использует разметку flex для размещения элементов по горизонтали и обеспечивает равную высоту элементов в строке. Каждый элемент — сам по себе контейнер flex, размещающий элементы вертикально.
Для каждого элемента на странице-источнике контент логически располагается иначе, чем требуется в визуализации: сперва название, далее описание и фото. Это обеспечивает удобный порядок при подготовке контента, а не для браузера. Для более убедительного визуального представления мы используем order (порядок) для перемещения картинки снизу на верх контента и align-self для размещения по центру по горизонтали.
Использование auto margin (авто поля) до кнопки заказа позволяет ей быть снизу каждого из контейнеров вне зависимости от высоты описания.

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS Flexible Layout Module. Example 1.</title>
    <link rel="stylesheet" href="index.css"/>
</head>
<body>
<section id='deals'>
    <section class='sale-item'>
        <h1>VPS-512</h1>
        <p>Быстрая и надежная VPS по доступной цене.</p>
        <img src='images/vps512.png'
             alt='VPS512.' width="300">
        <button>ЗАКАЗАТЬ ПРЯМО СЕЙЧАС ЗА 200 РУБЛЕЙ В МЕСЯЦ</button>
    </section>
    <section class='sale-item'>
        <h1>VPS-2048</h1>
        <p>Больше ресурсов, чтобы ваши проекты летали.</p>
        <img src='images/vps512.png'
             alt='VPS2048.' width="300">
        <button>ЗАКАЗАТЬ ПРЯМО СЕЙЧАС ЗА 600 РУБЛЕЙ В МЕСЯЦ</button>
    </section>
</section>
</body>
</html>

index.css

#deals {
    display:  flex;        /* Flex layout so items have equal height  Благодаря разметке Flex элементы имеют одинаковую высоту. */
    flex-flow: row wrap;  /* Размещаем элементы горизонтально и позволяем переносы на несколько строк. */
}
.sale-item {
    display: flex;        /* Для каждого элемента используем flex. */
    flex-flow: column;    /* Размещаем контент элемента вертикально.  */
    margin-right: 4mm;
}
.sale-item > img {        /*Для каждой картинки внутри класса sale-item */
    order: -1;            /* Размещаем элемент перед всеми остальными в визуальном отображении. */
    align-self: center;   /* Горизонтально размещаем картинку по центру.        */
}
.sale-item > button {     /*Для каждой кнопки внутри класса sale-item. */
    margin-top: auto;     /* Авто отступ сверху прижимает кнопку к низу контейнера. */
    background: green;
    color: white;
    border: none;
    padding: 2mm;
    font-weight: bold;
}
.sale-item > h1, p {
    align-self: center;
    text-align: center;
}

Модуль Flex расширяет определение свойства display в CSS 2.1, добавляя новый блочный (block-level) flex и встроенный (inline-level) inline-flex тип отображения и определяет новый тип форматирования контента со свойствами управления его разметкой. Никакие из этих свойств, определенных в модуле, не применяются к псевдо-элементам ::first-line и ::first-letter.

Если вы нашли ошибку в статье, пожалуйста напишите в ЛС или на почту. Если вы не можете оставлять комментарии на Хабре, напишите в Сообществе InfoboxCloud.

Продолжение следует…

Используем CSS Flexible Box Layout Module. Часть 1: Введение