Свойство display
имеет много разных значений. Обычно, используются только три из них: none
, inline
и block
, потому что когда-то браузеры другие не поддерживали.
Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.
Значение none
Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.
Значение block
- Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например
float
). - Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.
Это значение display
многие элементы имеют по умолчанию: <div>
, заголовок <h1>
, параграф <p>
.
Блоки прилегают друг к другу вплотную, если у них нет margin
.
Значение inline
- Элементы располагаются на той же строке, последовательно.
- Ширина и высота элемента определяются по содержимому. Поменять их нельзя.
Например, инлайновые элементы по умолчанию: <span>
, <a>
.
Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними <span>
и <a>
есть пробел. Это потому, что он есть в HTML.
Если расположить элементы вплотную – его не будет:
Содержимое инлайн-элемента может переноситься на другую строку.
При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.
Это проявляется, например, при назначении фона.
Например, три прямоугольника подряд:
Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:
Значение inline-block
Это значение – означает элемент, который продолжает находиться в строке (inline
), но при этом может иметь важные свойства блока.
Как и инлайн-элемент:
- Располагается в строке.
- Размер устанавливается по содержимому.
Во всём остальном – это блок, то есть:
- Элемент всегда прямоугольный.
- Работают свойства
width/height
.
Это значение display
используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.
Например:
Свойство vertical-align
позволяет выровнять такие элементы внутри внешнего блока:
Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.
Значения table-*
Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display
.
Для таблицы целиком table
, для строки – table-row
, для ячейки – table-cell
и т.д.
Пример использования:
Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, описанные в стандарте.
Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.
С точки зрения современного CSS, обычные <table>
, <tr>
, <td>
и т.д. – это просто элементы с предопределёнными значениями display
:
Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.
Вертикальное центрирование с table-cell
Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.
Это можно использовать для центрирования:
CSS не требует, чтобы вокруг table-cell
была структура таблицы:
table-row
и т.п. Может быть просто такой одинокий DIV
, это допустимо.
При этом он ведёт себя как ячейка TD
, то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align
.
Значения list-item, run-in и flex
У свойства display
есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:
list-item
-
Этот display по умолчанию используется для элементов списка. Он добавляет к блоку содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:
run-in
-
Если после
run-in
идётblock
, тоrun-in
становится его первым инлайн-элементом, то есть отображается в началеblock
.Если ваш браузер поддерживает это значение, то в примере ниже
h3
, благодаряdisplay:run-in
, окажется визуально внутриdiv
:Если же вы видите две строки, то ваш браузер НЕ поддерживает
run-in
.Вот, для примера, правильный вариант отображения
run-in
, оформленный другим кодом:Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает
run-in
. На момент написания этой статьи только IE поддерживалdisplay:run-in
. flex-box
-
Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module
learn.javascript.ru
slovar-vocab.com
Введение
Модуль разметки Flexbox (от английского Flexible Box – гибкий блок), находящийся на данный момент на этапе «Возможная рекомендация» стандартизации W3C (W3C Candidate Recommendation) нацелен на обеспечение более эффективного способа разметки, выравнивания и распределения места между элементами в контейнере, даже если их размер неизвестен и/или определяется динамически (вот почему его назвали «гибкий»).
Основная идея, стоящая за гибкой разметкой – это наделить контейнер способностью изменять высоту/ширину (и порядок) его элементов для оптимального заполнения доступного пространства (в основном для поддержки всех видов и размеров экранов).
Flex-контейнер растягивает элементы, чтобы заполнить свободное пространство или сжимает их, чтобы предотвратить выход за границы.
Что наиболее важно, разметка Flexbox не зависит от направления, в противоположность обычным разметкам (блокам, которые ориентированы вертикально и строчным элементам, располагающимся горизонтально).
И хотя элементы обычной разметки хорошо работают для страниц, им не хватает гибкости (и это не игра слов) для поддержки больших и сложных приложений (особенно если речь заходит об изменении ориентации, размеров, растяжении, сжатии и так далее).
Примечание: разметка Flexbox лучше всего подходит для компонентов приложения и небольших макетов, в то время как разметка с помощью grid предназначена для верстки более масштабных макетов.
Основные понятия и термины
Так как Flexbox это целый модуль, а не отдельное свойство, он включает в себя много элементов, в том числе и целый набор свойств. Некоторые из них предназначены для применения к контейнеру (родительскому элементу, известному как flex-контейнер), в то время как другие должны быть применены к дочерним элементам (назовем их flex-элементы).
Если обычная разметка основывается на направлениях блоков и строчных элементов, то flex-разметка базируется на направлениях flex-потока. Пожалуйста, обратите внимание на приведенную ниже схему из спецификации, объясняющую основную идею, стоящую за flex-разметкой:
В основном, элементы будут размещены либо вдоль главной оси (от точки main-start до main-end), либо вдоль поперечной оси (от точки cross-start до cross-end):
- main axis – это главная ось flex-контейнера, вдоль которой размещаются flex-элементы. Будьте осторожны, она не обязательно располагается горизонтально, ее положение зависит от свойства flex-direction (смотрите ниже);
- main-start | main-end — flex-элементы располагаются внутри контейнера, начиная от точки main-start, и доходят до точки main-end;
- main size – это ширина или высота flex-элемента, в зависимости от основной величины. В качестве значения свойства main size может быть установлено значение ширины или высоты;
- cross axis – поперечная ось, перпендикулярная главной оси. Ее направление зависит от направления главной оси.
- cross-start | cross-end – flex-строки заполняются элементами и размещаются в контейнере, начиная со стороны cross-start по направлению к стороне cross-end;
- cross size – ширина или высота flex-элемента, в зависимости от выбранной размерности. Свойство может иметь значение либо ширины, либо высоты поперечной размерности.
Свойства родительского класса (flex-контейнера)
display
Это свойство определяет flex-контейнер: строчной или блоковый, в зависимости от установленного значения. Также оно разрешает flex-контекст для всех его прямых потомков:
Отметим, что CSS-столбцы (columns) не имеют эффекта во flex-контейнере.
flex-direction
Это свойство задает главную ось, определяющую направление, в котором размещаются flex-элементы во flex-контейнере. Flexbox (за исключением опционального обертывания) является концептом однонаправленной разметки.
Представьте, что flex-элементы в первую очередь располагаются либо в горизонтальных, либо вертикальных колонках:
- row (по умолчанию): слева направо для ltr; справа налево для rtl;
- row-reverse: справа налево для in ltr; слева направо для rtl;
- column: так же как row, но сверху вниз;
- column-reverse: так же как row-reverse, но снизу вверх.
flex-wrap
По умолчанию flex-элементы попытаются втиснуться в одну линию. Вы можете изменить это, и обернуть элементы как нужно с помощью этого свойства. Здесь играет роль и направление, в котором располагаются новые линии:
- nowrap (по умолчанию): однострочный / слева направо для ltr; справа налево для rtl;
- wrap: многострочный / слева направо для ltr; справа налево для rtl;
- wrap-reverse: многострочный / справа налево для ltr; слева направо для rtl.
flex-flow (применяется к родительскому элементу flex-контейнера)
Это сокращенная форма свойств flex-direction и flex-wrap, которые вместе определяют главную и поперечную оси flex-контейнера. По умолчанию задается значение row nowrap:
justify-content
Данное свойство задает выравнивание вдоль главной оси. Это помогает распределить лишнее свободное пространство, в том случае, если все flex-элементы в строке негибкие, либо гибкие, но достигли своего максимального размера. Также данное свойство позволяет получить контроль над выравниваем элементов, когда они выходят за границы строки:
- flex-start (по умолчанию): элементы выравниваются к началу строки;
- flex-end: элементы выравниваются к концу строки;
- center: элементы выравниваются по центру строки;
- space-between: элементы распределяются в строке равномерно: первый элемент располагается в начале строки, последний – в конце;
- space-around: элементы распределяются в строке равномерно с одинаковым расстоянием между собой.
align-items
Это свойство определяет то, как по умолчанию располагаются flex-элементы относительно поперечной оси на текущей строке. Его можно считать версией justify-content для поперечной оси (перпендикулярной главной):
- flex-start: граница элементов cross-start располагается на линии cross-start;
- flex-end: граница элементов cross-start располагается на линии cross-end;
- center: элементы располагаются по центру поперечной оси;
- baseline: выравнивание элементов происходит согласно базовой линии;
- stretch (по умолчанию): элементы растягиваются для того, чтобы заполнить контейнер (с учетом значений min-width/max-width).
align-content
Это свойство позволяет выравнивать строки внутри flex-контейнера, когда есть свободное место на поперечной оси, что схоже с тем, как свойство justify-content выравнивает отдельные элементы относительно главной оси.
Примечание: это свойство не будет работать, если есть только одна строка flex-элементов:
- flex-start: строки располагаются в начале контейнера;
- flex-end: строки располагаются в конце контейнера;
- center: строки располагаются посередине контейнера;
- space-between: строки распределяются равномерно; первая строка – в начале контейнера, а последняя – в конце;
- space-around: строки размещены равномерно на одинаковом расстоянии друг от друга;
- stretch (по умолчанию): строки растягиваются, чтобы заполнить оставшееся пространство.
Свойства дочерних элементов
(flex-элементы)
Order
По умолчанию, flex-элементы располагаются в порядке, заданном источником. Однако свойство order контролирует порядок, в котором элементы появляются во flex-контейнере:
flex-grow
Это свойство позволяет flex-элементу «разрастаться» в случае необходимости. Оно принимает безразмерное значение, служащее в качестве пропорции. Это значение определяет, какой объем доступного пространства внутри flex-контейнера может занять элемент.
Если для всех элементов свойство flex-grow установлено в 1, то для каждого дочернего элемента будет задан одинаковый размер внутри контейнера. Если вы установите для одного из дочерних элементов значение 2, то он займет в два раза больше места, чем другие:
Отрицательные числа недопустимы.
flex-shrink
Это свойство определяет для flex-элементов возможность сжиматься в случае необходимости:
Отрицательные числа недопустимы.
flex-basis
Это свойство определяет размер элементов по умолчанию перед распределением оставшегося пространства:
flex
Это свойство является сокращенной формой для комбинации свойств flex-grow, flex-shrink и flex-basis. Второй и третий параметры (flex-shrink и flex-basis) задаются опционально. Значения по умолчанию: 0 1 auto:
align-self
Это свойство позволяет переопределить выравнивание, заданное по умолчанию (или определенное свойством align-items) для отдельных flex-элементов.
Доступные значения вы можете найти в описании свойства align-items:
Обратите внимание, что float, clear и vertical-align не работают с flex-элементами.
Примеры
Давайте начнем с очень простого примера, решив практически ежедневную проблему: идеальное выравнивание по центру. Нет ничего проще, если использовать flexbox:
Этот пример основывается на том факте, что свойство margin, установленное в значение auto, поглощает лишнее пространство. Поэтому такое задание отступа выравнивает элемент ровно по центру от обеих осей.
Теперь давайте воспользуемся еще несколькими свойствами. Предположим, что у нас есть список из 6 элементов, все они фиксированного размера (для эстетичности), но с возможностью автоматического заполнения.
Мы хотим, чтобы они были красиво, равномерно распределены по горизонтальной оси таким образом, чтобы при изменении размера окна браузера, все смотрелось хорошо (без использования медиа запросов):
Готово! Все остальное — уже вопросы оформления. Здесь располагается демонстрация этого примера. Перейдите по ссылке и попробуйте изменить размер окна, чтобы посмотреть, что произойдет:
HTML:
CSS:
Давайте попробуем еще кое-что. Допустим, у нас на самом верху веб-сайта находится меню навигации, выровненное вправо, но мы хотим, чтобы на экранах среднего размера оно располагалось по центру, а для устройств с маленьким экраном – располагалось в один столбец. Все достаточно просто:
CSS:
HTML:
CSS:
Давайте попробуем сделать еще лучше, поиграв с «гибкостью» flex-элементов. Как насчет мобильной разметки в три столбца с заголовком и подвалом во всю ширину? И с выводом элементов, независимым от порядка, заданного исходным кодом:
CSS:
HTML:
CSS:
Использование префиксов для flexbox
Flexbox требует использования вендорных префиксов для возможности поддержки большинством браузеров. Это включает в себя не только использование вендорных префиксов перед свойствами, но и полностью разные названия свойств и значений.
А все потому, что спецификация flexbox менялась с течением времени, создав «old» (старую), «tweener«(промежуточную), и «new» (новую) версии.
Возможно, наилучший выход в этой ситуации — это писать код, используя новый (и финальный) синтаксис и пропускать CSS через Autoprefixer, который очень хорошо обрабатывает откаты к предыдущим версиям.
В качестве альтернативы, ниже приведен Sass метод @mixin для помощи с некоторыми префиксами, который к тому же раскрывает идею того, какие действия должны быть предприняты:
SCSS:
Поддержка браузерами
Разделена «версиями» flexbox на:
- (new) – означает поддержку последнего синтаксиса из спецификации (например, display: flex;).
- (tweener) – означает поддержку дополнительного неофициального синтаксиса от 2011 года (например, display: flexbox;).
- (old) – означает поддержку старого синтаксиса от 2009 года (например, display: box;).
Браузер Blackberry версии 10+ поддерживает новый синтаксис.
Перевод статьи «A Complete Guide to Flexbox» был подготовлен дружной командой проекта Сайтостроение от А до Я.
www.internet-technologies.ru
Почему бы не использовать строчные элементы, такие как <span>?
Потому что вы выбираете элемент HTML по его смыслу, а не отображению. Если мы решили, что абзац подходит нашему содержимому лучше всего, мы не должны менять тег ради стилизации. Это CSS заботится о стилизации.
Короче говоря, display позволяет сменить тип элемента без изменения его смысла.
Для каждого варианта display есть определённое поведение:
- block будет занимать всю доступную ширину;
- inline будет действовать как обычный текст;
- inline-block является, как предполагает его название, соединением блочного и строчного поведения, вариант «лучшее из обоих миров»;
- list-item похож на block, так как он занимает всю доступную ширину, но показывает дополнительный маркер пункта списка;
- у table, table-row и table-cell очень специфическое, хотя и неожиданное поведение, которое позволяет строить более интересные макеты.
display: block
Превратит любой элемент в блочный.
Этот метод часто используется для ссылок, чтобы увеличить зону их щелчка, которую можно легко оценить, задав цвет фона.
CSS
.menu a { background: red; color: white; }
HTML
<ul class="menu"> <li> <a>Главная</a> </li> <li> <a>Возможности</a> </li> <li> <a>Цены</a> </li> <li> <a>О нас</a> </li> </ul>
Если превратить эти ссылки в блочные, мы увеличим их область:
.menu a { background: red; color: white; display: block; }
display: inline
Превращает любой элемент в строчный, как если бы он был только простым текстом.
Часто используется для создания горизонтальной навигации, где семантически, но не визуально полезны пункты списка.
CSS
.menu li { display: inline; }
HTML
<ul class="menu"> <li> <a>Главная</a> </li> <li> <a>Возможности</a> </li> <li> <a>Цены</a> </li> <li> <a>О нас</a> </li> </ul>
display: list-item
Элементы HTML, отображаемые как list-item, являются (неудивительно) пунктами списка <li>, но также описанием термина <dd>.
Пункт списка отображается с маркером (в неупорядоченном списке <ul>) или с порядковым номером (в упорядоченном списке <ol>).
Поскольку отображение этих маркеров и цифр меняется во всех браузерах, также трудно стилизовать их в CSS, правило display: list-item никогда не используется. На самом деле, часто <li> отображаются как display: block или display: inline, так как они более гибкие для стилизации.
display: none
Применение display: none к элементу HTML удаляет его из веб-страницы, как если бы он никогда не существовал в вашем коде.
CSS
.gone-baby-gone { display: none; }
HTML
<p>Я слышал кто-то выступает?</p> <p class="gone-baby-gone">Ха-ха-ха</p> <p>Я, должно быть, сплю...</p>
Здесь в коде три абзаца, но видны только два, как будто второго человека никогда не существовало.
visibility: hidden
Свойство visibility немного похоже на display. Применение visibility: hidden скрывает элемент со страницы, но только делает его невидимым: он по-прежнему занимает место, где только что был.
CSS
.hollow-man { visibility: hidden; }
HTML
<p>So far away from me </p> <p class="hollow-man">So far i just can't see</p> <p class="hollow-man">So far away from me</p> <p class="hollow-man">You're so far away from me</p> <p>You're so far away...</p>
Здесь в коде пять абзацев, но появляются только два, при этом пространство, которое занимали скрытые абзацы, остаётся, но абзацы видеть вы не можете.
Перейти к заданиям
webref.ru
Что такое flexbox
- Содержание:
- 1. Основные понятия
- 2. Flex-контейнер
- 3. Flex-элементы
- 4. Порядок отображения flex-элементов и ориентация
- 4.1. Направление главной оси: flex-direction
- 4.2. Управление многострочностью flex-контейнера: flex-wrap
- 4.3. Краткая запись направления и многострочности: flex-flow
- 4.4. Порядок отображения flex-элементов: order
- 5. Гибкость flex-элементов
- 5.1. Задание гибких размеров одним свойством: flex
- 5.2. Коэффициент роста: flex-grow
- 5.3. Коэффициент сжатия: flex-shrink
- 5.4. Базовый размер: flex-basis
- 6. Выравнивание
- 6.1. Выравнивание по главной оси: justify-content
- 6.2. Выравнивание по поперечной оси: align-items и align-self
- 6.3. Выравнивание линий flex-контейнера: align-content
Поддержка браузерами
IE: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Chrome: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Opera: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Opera Mini: 8
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44
1. Основные понятия

Для описания модуля Flexbox используется определенный набор терминов. Значение flex-flow и режим записи определяют соответствие этих терминов физическим направлениям: верх / право / низ / лево, осям: вертикальная / горизонтальная и размерам: ширина / высота.
Главная ось (main axis) — ось, вдоль которой выкладываются flex-элементы. Она простирается в основном измерении.
Main start и main end — линии, которые определяют начальную и конечную стороны flex-контейнера, относительно которых выкладываются flex-элементы (начиная с main start по направлению к main end).
Основной размер (main size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что из них находится в основном измерении, определяют основной размер flex-контейнера или flex-элемента.
Поперечная ось (cross axis) — ось, перпендикулярная главной оси. Она простирается в поперечном измерении.
Cross start и cross end — линии, которые определяют начальную и конечную стороны поперечной оси, относительно которых выкладываются flex-элементы.
Поперечный размер (cross size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что находится в поперечном измерении, являются их поперечным размером.

2. Flex-контейнер
Flex-контейнер устанавливает новый гибкий контекст форматирования для его содержимого. Flex-контейнер не является блочным контейнером, поэтому для дочерних элементов не работают такие CSS-свойства, как float, clear, vertical-align. Также, на flex-контейнер не оказывают влияние свойства column-*, создающие колонки в тексте и псевдоэлементы ::first-line и ::first-letter.
Модель flexbox-разметки связана с определенным значением CSS-свойства display родительского html-элемента, содержащего внутри себя дочерние блоки. Для управления элементами с помощью этой модели нужно установить свойство display следующим образом:
.flex-container { /*генерирует flex-контейнер уровня блока*/ display: -webkit-flex; display: flex; } .flex-container { /*генерирует flex-контейнер уровня строки*/ display: -webkit-inline-flex; display: inline-flex; }
После установки данных значений свойства каждый дочерний элемент автоматически становится flex-элементом, выстраиваясь в один ряд (вдоль главной оси). При этом блочные и строчные дочерние элементы ведут себя одинаково, т.е. ширина блоков равна ширине их содержимого с учетом внутренних полей и рамок элемента.

Если родительский блок содержит текст или изображения без оберток, они становятся анонимными flex-элементами. Текст выравнивается по верхнему краю блока-контейнера, а высота изображения становится равной высоте блока, т.е. оно деформируется.
3. Flex-элементы
Flex-элементы — блоки, представляющие содержимое flex-контейнера в потоке. Flex-контейнер устанавливает новый контекст форматирования для своего содержимого, который обуславливает следующие особенности:
- Для flex-элементов блокируется их значение свойства display. Значение display: inline-block; и display: table-cell; вычисляется в display: block;.
- Пустое пространство между элементами исчезает: оно не становится своим собственным flex-элементом, даже если межэлементный текст обернут в анонимный flex-элемент. Для содержимого анонимного flex-элемента невозможно задать собственные стили, но оно будет наследовать их (например, параметры шрифта) от flex-контейнера.
- Абсолютно позиционированный flex-элемент не участвует в компоновке гибкого макета.
- Поля margin соседних flex-элементов не схлопываются.
- Процентные значения margin и padding вычисляются от внутреннего размера содержащего их блока.
- margin: auto; расширяются, поглощая дополнительное пространство в соответствующем измерении. Их можно использовать для выравнивания или раздвигания смежных flex-элементов.
- Автоматический минимальный размер flex-элементов по умолчанию является минимальным размером его содержимого, то есть min-width: auto;. Для контейнеров с прокруткой автоматический минимальный размер обычно равен нулю.
4. Порядок отображения flex-элементов и ориентация
Содержимое flex-контейнера можно разложить в любом направлении и в любом порядке (переупорядочение flex-элементов внутри контейнера влияет только на визуальный рендеринг).
4.1. Направление главной оси: flex-direction
Свойство относится к flex-контейнеру. Управляет направлением главной оси, вдоль которой укладываются flex-элементы, в соответствии с текущим режимом записи. Не наследуется.
flex-direction | |
---|---|
Значения: | |
row | Значение по умолчанию, слева направо (в rtl справа налево). Flex-элементы выкладываются в строку. Начало (main-start) и конец (main-end) направления главной оси соответствуют началу (inline-start) и концу (inline-end) инлайн-оси (inline-axis). |
row-reverse | Направление справа налево (в rtl слева направо). Flex-элементы выкладываются в строку относительно правого края контейнера (в rtl — левого). |
column | Направление сверху вниз. Flex-элементы выкладываются в колонку. |
column-reverse | Колонка с элементами в обратном порядке, снизу вверх. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |

Синтаксис
.flex-container { display: -webkit-flex; -webkit-flex-direction: row-reverse; display: flex; flex-direction: row-reverse; }
4.2. Управление многострочностью flex-контейнера: flex-wrap
Свойство определяет, будет ли flex-контейнер однострочным или многострочным, а также задает направление поперечной оси, определяющее направление укладки новых линий flex-контейнера.
По умолчанию flex-элементы укладываются в одну строку, вдоль главной оси. При переполнении они будут выходить за пределы ограничивающей рамки flex-контейнера. Свойство не наследуется.
flex-wrap | |
---|---|
Значения: | |
nowrap | Значение по умолчанию. Flex-элементы не переносятся, а располагаются в одну линию слева направо (в rtl справа налево). |
wrap | Flex-элементы переносятся, располагаясь в несколько горизонтальных рядов (если не помещаются в один ряд) в направлении слева направо (в rtl справа налево). |
wrap-reverse | Flex-элементы переносятся на новые линии, располагаясь в обратном порядке слева-направо, при этом перенос происходит снизу вверх. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |

Синтаксис
.flex-container { display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap; }
4.3. Краткая запись направления и многострочности: flex-flow
Свойство позволяет определить направления главной и поперечной осей, а также возможность переноса flex-элементов при необходимости на несколько строк. Представляет собой сокращённую запись свойств flex-direction и flex-wrap. Значение по умолчанию flex-flow: row nowrap;. свойство не наследуется.
flex-flow | |
---|---|
Значения: | |
направление | Указывает направление главной оси. Значение по умолчанию row. |
многострочность | Задаёт многострочность поперечной оси. Значение по умолчанию nowrap. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
.flex-container { display: -webkit-flex; -webkit-flex-flow: row wrap; display: flex; flex-flow: row wrap; }
4.4. Порядок отображения flex-элементов: order
Свойство определяет порядок, в котором flex-элементы отображаются и располагаются внутри flex-контейнера. Применяется к flex-элементам. Свойство не наследуется.
Первоначально все flex-элементы имеют order: 0;. При указании значения от -1 для элемента он перемещается в начало сроки, значение 1 — в конец. Если несколько flex-элементов имеют одинаковое значение order, они будут отображаться в соответствии с исходным порядком.
order | |
---|---|
Значения: | |
число | Свойство задается целым числом, отвечающим за порядок отображения flex-элементов. Значение по умолчанию 0. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-order: 1; order: 1; }

5. Гибкость flex-элементов
Определяющим аспектом гибкого макета является возможность «сгибать» flex-элементы, изменяя их ширину / высоту, чтобы заполнить доступное пространство в основном измерении. Это делается с помощью свойства flex. Flex-контейнер распределяет свободное пространство по своим дочерним элементам (пропорционально их коэффициенту flex-grow) для заполнения контейнера или сжимает их (пропорционально их коэффициенту flex-shrink), чтобы предотвратить переполнение.
Flex-элемент будет полностью «негибок», если его значения flex-grow и flex-shrink равны нулю, и «гибкий» в противном случае.
5.1. Задание гибких размеров одним свойством: flex
Свойство представляет собой сокращённую запись свойств flex-grow, flex-shrink и flex-basis. Значение по умолчанию: flex: 0 1 auto;. Можно указывать как одно, так и все три значения свойств. Свойство не наследуется.
W3C рекомендует использовать сокращённую запись, так как она правильно сбрасывает любые неуказанные компоненты, чтобы подстроиться под типичное использование.
flex | |
---|---|
Значения: | |
коэффициент растяжения | Коэффициент увеличения ширины flex-элемента относительно других flex-элементов. |
коэффициент сужения | Коэффициент уменьшения ширины flex-элемента относительно других flex-элементов. |
базовая ширина | Базовая ширина flex-элемента. |
auto | Эквивалентно flex: 1 1 auto;. |
none | Эквивалентно flex: 0 0 auto;. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px; }
5.2. Коэффициент роста: flex-grow
Свойство определяет коэффициент роста одного flex-элемента относительно других flex-элементов в flex-контейнере при распределении положительного свободного пространства. Если сумма значений flex-grow flex-элементов в строке меньше 1, они занимают менее 100% свободного пространства. Свойство не наследуется.
flex-grow | |
---|---|
Значения: | |
число | Положительное целое или дробное число, устанавливающее коэффициент роста flex-элемента. Значение по умолчанию 0. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |

Синтаксис
.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex-grow: 3; flex-grow: 3; }
5.3. Коэффициент сжатия: flex-shrink
Свойство указывает коэффициент сжатия flex-элемента относительно других flex-элементов при распределении отрицательного свободного пространства. Умножается на базовый размер flex-basis. Отрицательное пространство распределяется пропорционально тому, насколько предмет может сжаться, поэтому, например, маленький flex-элемент не уменьшится до нуля, пока не будет заметно уменьшен flex-элемент большего размера. Свойство не наследуется.
flex-shrink | |
---|---|
Значения: | |
число | Положительное целое или дробное число, устанавливающее коэффициент уменьшения flex-элемента. Значение по умолчанию 1. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |

Синтаксис
.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex-shrink: 3; flex-shrink: 3; }
5.4. Базовый размер: flex-basis
Свойство устанавливает начальный основной размер flex-элемента до распределения свободного пространства в соответствии с коэффициентами гибкости. Для всех значений, кроме auto и content, базовый гибкий размер определяется так же, как width в горизонтальных режимах записи. Процентные значения определяются относительно размера flex-контейнера, а если размер не задан, используемым значением для flex-basis является размеры его содержимого. Не наследуется.
flex-basis | |
---|---|
Значения: | |
auto | Значение по умолчанию. Элемент получает базовый размер, соответствующий размеру его содержимого (если он не задан явно). |
content | Определяет базовый размер в зависимости от содержимого flex-элемента. |
длина | Базовый размер определяется так же, как для ширины и высоты. Задается в единицах длины. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex-basis: 100px; flex-basis: 100px; }
6. Выравнивание
6.1. Выравнивание по главной оси: justify-content
Свойство выравнивает flex-элементы по главной оси flex-контейнера, распределяя свободное пространство, незанятое flex-элементами. Когда элемент преобразуется в flex-контейнер, flex-элементы по умолчанию сгруппированы вместе (если для них не заданы поля margin). Промежутки добавляются после расчета значений margin и flex-grow. Если какие-либо элементы имеют ненулевое значение flex-grow или margin: auto;, свойство не будет оказывать влияния. Свойство не наследуется.
justify-content | |
---|---|
Значения: | |
flex-start | Значение по умолчанию. Flex-элементы выкладываются в направлении, идущем от начальной линии flex-контейнера. |
flex-end | Flex-элементы выкладываются в направлении, идущем от конечной линии flex-контейнера. |
center | Flex-элементы выравниваются по центру flex-контейнера. |
space-between | Flex-элементы равномерно распределяются по линии. Первый flex-элемент помещается вровень с краем начальной линии, последний flex-элемент — вровень с краем конечной линии, а остальные flex-элементы на линии распределяются так, чтобы расстояние между любыми двумя соседними элементами было одинаковым. Если оставшееся свободное пространство отрицательно или в строке присутствует только один flex-элемент, это значение идентично параметру flex-start. |
space-around | Flex-элементы на линии распределяются так, чтобы расстояние между любыми двумя смежными flex-элементами было одинаковым, а расстояние между первым / последним flex-элементами и краями flex-контейнера составляло половину от расстояния между flex-элементами. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |

Синтаксис
.flex-container { display: -webkit-flex; -webkit-justify-content: flex-start; display: flex; justify-content: flex-start; }
6.2. Выравнивание по поперечной оси: align-items и align-self
Flex-элементы можно выравнивать по поперечной оси текущей строки flex-контейнера. align-items устанавливает выравнивание для всех элементов flex-контейнера, включая анонимные flex-элементы. align-self позволяет переопределить это выравнивание для отдельных flex-элементов. Если любое из поперечных margin flex-элемента имеет значение auto, align-self не имеет никакого влияния.
6.2.1. Align-items
Свойство выравнивает flex-элементы, в том числе и анонимные flex-элементы по поперечной оси. Не наследуется.
align-items | |
---|---|
Значения: | |
flex-start | Верхний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей margin и рамок border элемента), проходящей через начало поперечной оси. |
flex-end | Нижний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей margin и рамок border элемента), проходящей через конец поперечной оси. |
center | Поля flex-элемента центрируется по поперечной оси в пределах flex-линии. |
baseline | Базовые линии всех flex-элементов, участвующих в выравнивании, совпадают. |
stretch | Если поперечный размер flex-элемента вычисляется как auto и ни одно из поперечных значений margin не равно auto, элемент растягивается. Значение по умолчанию. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |

Синтаксис
.flex-container { display: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start; }
6.2.2. Align-self
Свойство отвечает за выравнивание отдельно взятого flex-элемента по высоте flex-контейнера. Переопределяет выравнивание, заданное align-items. Не наследуется.
align-self | |
---|---|
Значения: | |
auto | Значение по умолчанию. Flex-элемент использует выравнивание, указанное в свойстве align-items flex-контейнера. |
flex-start | Верхний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей margin и рамок border элемента), проходящей через начало поперечной оси. |
flex-end | Нижний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей margin и рамок border элемента), проходящей через конец поперечной оси. |
center | Поля flex-элемента центрируется по поперечной оси в пределах flex-линии. |
baseline | Flex-элемент выравнивается по базовой линии. |
stretch | Если поперечный размер flex-элемента вычисляется как auto и ни одно из поперечных значений margin не равно auto, элемент растягивается. Значение по умолчанию. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |

Синтаксис
.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-align-self: center; align-self: center; }
6.3. Выравнивание линий flex-контейнера: align-content
Свойство выравнивает flex-линии в flex-контейнере при наличии дополнительного пространства на поперечной оси, аналогично выравниванию отдельных элементов на главной оси с помощью свойства justify-content. Свойство не влияет на однострочный flex-контейнер. Не наследуется.
align-content | |
---|---|
Значения: | |
stretch | Значение по умолчанию. Строки flex-элементов равномерно растягиваются, заполняя все доступное пространство. |
flex-start | Строки flex-элементов выравниваются по левому краю flex-контейнера относительно верхнего края блока-контейнера. |
flex-end | Строки flex-элементов выравниваются по левому краю flex-контейнера относительно нижнего края блока-контейнера. |
center | Строки flex-элементов выравниваются по высоте по середине flex-контейнера относительно его левого края. |
space-between | Строки flex-элементов выравниваются по высоте по середине flex-контейнера относительно его левого края. Свободное пространство распределяется между ними. Первый ряд flex-элементов прижимается к началу flex-контейнера, последний ряд — к нижнему краю. |
space-around | Строки flex-элементов равномерно распределяются по высоте, свободное пространство добавляется сверху и снизу строки. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |

Синтаксис
.flex-container { display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-align-content: flex-end; display: flex; flex-flow: row wrap; align-content: flex-end; height: 100px; }
По материалам CSS Flexible Box Layout Module Level 1
html5book.ru