Display box

Свойство 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» был подготовлен дружной командой проекта Сайтостроение от А до Я.