Визуальное руководство по свойствам Flexbox из CSS3

Раскладка Flexbox, официально названная CSS-модуль раскладки гибких боксов – новый раскладочный модуль в CSS3, созданный для улучшения выравнивания, направления и порядка элементов в контейнере, даже когда их размер неизвестен или меняется динамически. Основная характерная черта flex-контейнера — это способность изменять ширину или высоту своих дочерних элементов, чтобы как можно лучше заполнить доступную область на экранах разной ширины.

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

Вместо того, чтобы объяснять, как работают flex-свойства, это руководство сосредоточится на том, как flex-свойства влияют на раскладку визуально.

Основы

Прежде чем начать описание свойств flexbox, давайте немного познакомимся с основами модели flexbox. Flex-раскладка состоит из родительского контейнера, именуемого flex-контейнером, и его непосредственных дочерних элементов – flex-элементов.

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

Flexbox-раскладка прошла через многие итерации и несколько изменений синтаксиса по сравнению с исходным черновиком из 2009-го, поэтому, чтобы избежать путаницы, для ясности, мы будем использовать синтаксис только из последнего рабочего черновика (сентябрь 2014). Если вам нужна совместимость со старыми браузерами, то прочитайте эту статью о том, как сделать это наилучшим образом.

Браузеры с поддержкой последней спецификации flexbox:

• Chrome 29+
• Firefox 28+
• Internet Explorer 11+
• Opera 17+
• Safari 6.1+ (с префиксом -webkit- )
• Android 4.4+
• iOS 7.1+ (с префиксом -webkit- )

Более детальную поддержку и совместимость с браузерами можно посмотреть здесь.

Применение

Чтобы запустить механизм flexbox-раскладки, просто установите свойство display для родительского HTML-элемента:

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

Замечание: это свойство нужно установить только для родительского контейнера и все его непосредственные дочерние элементы автоматически станут flex-элементами.

Есть несколько способов сгруппировать свойства flexbox и безусловно самый лёгкий способ, который я обнаружил, чтобы понять возможности flexbox и их использование – это разделить их на две группы, одну для flex-контейнера, а другую для flex-элементов. Ниже объясняется всё о них и то, как они влияют на раскладку визуально.

Свойства flexbox для контейнера

Это свойство указывает, как flex-элементы выкладываются во flex-контейнере, путём установки направления главной оси flex-контейнера. Они могут выкладываться в двух главных направлениях, горизонтально, как строки и вертикально, как колонки.

Значения:

С направлением row flex-элементы укладываются в ряд слева направо в ltr -контексте.

С направлением row-reverse flex-элементы укладываются в ряд справа налево в ltr -контексте.

С направлением column flex-элементы укладываются в колонку сверху вниз.

С направлением column-reverse flex-элементы укладываются в колонку снизу вверх.

Свойство по умолчанию: row

Замечание: row и row-reverse зависят от режима письма, поэтому в rtl -контексте они соответственно будут перевёрнуты.

Первоначальная идея flexbox — контейнер для установки его элементов в одну единственную строку. Свойство flex-wrap управляет тем, как flex-контейнер будет выкладывать свои элементы — в одну строку или в несколько, и направлением, в котором будут укладываться новые строки.

Значения:

Flex-элементы отображаются в один ряд, по умолчанию они сужаются, чтобы уместиться в ширину flex-контейнера.

Flex-элементы отображаются в несколько рядов, если потребуется, слева направо и сверху вниз.

Flex-элементы отображаются в несколько рядов, если потребуется, слева направо и снизу вверх.

Значение по умолчанию: nowrap

Замечание: эти свойства зависят от режима письма, поэтому в rtl -контексте они соответственно будут перевёрнуты.

Это свойство – сокращённая запись для свойств flex-direction и flex-wrap .

Значения:

Значение по умолчанию: row nowrap

Свойство justify-content выравнивает flex-элементы по главной оси текущей строки flex-контейнера. Оно помогает распределить оставшееся свободное пространство, в случаях, если все flex-элементы в строке негибкие, или гибкие, но достигли своего максимального размера.

Значения:

Flex-элементы выравниваются по левой стороне flex-контейнера в контексте ltr .

Flex-элементы выравниваются по правой стороне flex-контейнера в контексте ltr .

Flex-элементы выравниваются по центру flex-контейнера.

Flex-элементы отображаются с равным интервалом между ними, а первый и последний flex-элементы выравниваются по краям flex-контейнера.

Flex-элементы отображаются с равным интервалом вокруг каждого flex-элемента, включая первый и последний flex-элементы.

Значение по умолчанию: flex-start

Flex-элементы могут быть выровнены вдоль поперечной оси текущей строки flex-контейнера, подобно justify-content , но в перпендикулярном направлении. Это свойство устанавливает выравнивание по умолчанию для всех flex-элементов, в том числе и для анонимных flex-элементов.

Значения:

Flex-элементы заполняют всю высоту (или ширину) от поперечного начала к поперечному концу flex-контейнера.

Flex-элементы прижимаются к поперечному началу flex-контейнера.

Flex-элементы прижимаются к поперечному концу flex-контейнера.

Flex-элементы укладываются по центру поперечной оси flex-контейнера.

Flex-элементы выравниваются по базовой линии.

Значение по умолчанию: stretch

Замечание: более подробно о том, как высчитывается базовая линия, можно почитать здесь.

Свойство align-content выравнивает строки flex-контейнера во flex-контейнере, когда есть дополнительное пространство по поперечной оси, подобно тому, как justify-content выравнивает отдельные элементы по главной оси.

Значения:

Flex-элементы отображаются с распределённым пространством после каждого ряда flex-элементов.

(прим. перев.: такая картина, как на рисунке, будет только при значении align-items: flex-start. Корректнее было бы сказать, что align-content: stretch поровну делит общую высоту контейнера между всеми строками флекс-элементов, а внутри каждой строки они выравниватся с помощью align-items, так же как и в случае одной строки.)

Ряды flex-элементы прижаты к поперечному началу flex-контейнера.

Ряды flex-элементы прижаты к поперечному концу flex-контейнера.

Ряды flex-элементов укладываются по центру поперечной оси flex-контейнера.

Ряды flex-элементов отображаются с равным интервалом между ними, а первый и последний ряд выравнивается по краям flex-контейнера.

Flex-элементы отображаются с равным интервалом вокруг каждого ряда flex-элементов.

Значение по умолчанию: stretch

Замечание: это свойство работает только в случае, если flex-контейнер содержит несколько строк flex-элементов. Если элементы размещены в единственной строке, то это свойство не влияет на раскладку.

• любые свойства column -* не влияют на flex-контейнер.
• псевдоэлементы :: first-line and :: first-letter не применяются к flex-контейнеру.

Свойства flexbox для элемента

Свойство order определяют порядок, в котором дочерние элементы flex-контейнера появляются внутри него. По умолчанию, flex-элементы следуют один за другим по мере добавления во flex-контейнер.

Значения:

Flex-элементы могут быть упорядочены при помощи этого простого свойства, без изменения структуры HTML-кода.

Значение по умолчанию: 0

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

Значения:

Если всем flex-элементам задано одно и тоже значение flex - grow , тогда все элементы в контейнере будут одинакового размера.

Второй flex-элемент занимает больше места относительно размера других flex-элементов.

Значение по умолчанию: 0

Замечание: отрицательные значения игнорируются.

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

Значения:

По умолчанию любые flex-элементы могут быть сужены, но если мы установим значение flex-shrink в 0 (не сужаются), то они сохранят первоначальный размер.

Значение по умолчанию: 1

Замечание: отрицательные значения игнорируются.

Это свойство принимает те же самые значения, что width and height , и указывает исходный главный размер flex-элемента, прежде чем свободное пространство распределится в соответствии с факторами гибкости.

Значения:

flex - basis указывается для 4-го flex-элемента и диктует его исходный размер.

Значение по умолчанию: auto

Замечание: есть проблема именования со значением auto , которая будет решена в будущем.

Прим. перев. в текущем редакторском черновике предлагается решить проблему с помощью введения дополнительного значения content: c этим значением базовый главный размер будет определяться по содержимому, а со значением auto — по значению свойства главного размера (width или height в зависимости от flex-direction)

Это свойство – сокращённая запись для свойств flex-grow , flex-shrink и flex-basis . Наряду с другими значениями, его можно установить также в auto ( 1 1 auto ) и none ( 0 0 auto ).

Значение по умолчанию: 0 1 auto

Замечание: W3C рекомендует использовать сокращённую запись вместо раздельных свойств компонентов, поскольку сокращённая запись правильно сбрасывает любые неуказанные компоненты, чтобы подстроиться под типичное использование.

Свойство align-self переопределяет выравнивание по умолчанию (или то, что указано в align-items ) для отдельных flex-элементов. Для понимания доступных значений смотрите пояснения align-items для flex-контейнера.

Значения:

Для 3-го и 4-го элемента переопределено выравнивание при помощи свойства align - self .

Значение по умолчанию: auto

Замечание: значение auto для align-self вычисляется как значение align-items родительского элемента, либо stretch , если родительского элемента нет.

• float , clear и vertical-align не влияют на flex-элемент и не вырывают его из потока.

Игровая площадка с Flexbox

Здесь представлена площадка для игр с flexbox, где можно поиграть с различными flex-свойствами и изучить силу раскладки flexbox. Комбинируйте некоторые flex-свойства, чтобы получить сложные раскладки.

See the Pen yNNZxr by Ilya Streltsyn (@SelenIT) on CodePen.

Также можно увидеть эту игровую площадку в полноэкранном примере здесь, или получить исходный код на GitHub.