14.07.2015 09:01
infobox 0 2163 Источник
В данной статье мы рассмотрим использование модели 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.

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

Комментарии (0)