В данной статье мы рассмотрим использование модели 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.
Продолжение следует…
ссылка на оригинал статьи http://habrahabr.ru/post/262545/
Добавить комментарий