2.22. CSS3-flexbox
CSS3-flexbox — это специальная технология, которая была введена в последней версии каскадных стилей, позволяющая задавать гибкую сетку расположения блоков внутри некоторого контейнера-родителя.
Какие возможности дает данная сетка:
- возможность управлять колончатой структурой основного каркаса html-вёрстки;
- управлять ориентацией расположения html-тэгов подобно табличной верстке;
- управлять порядком расположения;
- и многие другие.
Сама технология css-flexbox стоит на базировании блоков в относительной гоизонталдьной и вертикальной осей согласно следующей схемы:
Приведем список веб-обозревателей, которые поддерживают рассматриваемое свойство блоков как стандартно, так и с применением спецпрефиксов:
ИЕ: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Хром: 29.0, 21.0 -webkit-
Сафари: 6.1 -webkit-
Опера: 12.1 -webkit-
Сафари (под Мак): 7.0 -webkit-
Опера-Мини: 8
Анройд-Браузер: 4.4, 4.1 -webkit-
Хром (под Андройд): 44
1.1. Свойство display: flex
CSS-правило предназначено для выстраивания flexbox-сетки, которая строится из дочерних html-тэгов, расположенных внутри некоторого родительского контейнера. Для задания данной сетки необходимо установить правило display в значение:
- display: flex; — для блокового отображения;
- display: inline-flex; — для инлайнового отображения.
Следует отметить, что для некоторых версий браузеров необходимо прописывать это правило с помощью спецпрефиксов (см. пункт выше), а также то, что html-теги лежащие в родителе без обёртки считаются анонимными:
1.2. Выравниваем горизонтально justify-content
Правило используется для того, чтобы выровнять горизонтально дочерние объекты внутри родительского flexbox-контейнера. Данное правило не наследуется.
| justify-content | |
|---|---|
| Значения: | |
| flex-start | Выравнивает по левой кромке. Дефолтное значение |
| flex-end | Выравнивает по правой кромке. |
| center | Выравнивает по середине. |
| space-between | По всей ширине родителя на равновеличинные отрезки. Стоит отметить, что первый элемент приживается к левому краю без пустот, но с учетом паддингов, а последний также, но к правому краю. Все остальные блочные элементы размещаются между первым и последним через одинаковые отрезки пустоты. |
| space-around | По всей ширине так, что между каждыми двумя блоками будет одинаковый отступ, а по края его половина. |
| initial | Задание дефолтного значения. |
| inherit | Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга. |
Формат записи
1.3. Вертикальное выравнивание align-items
Свойство используется для того, чтобы выровнять вертикально дочерние объекты внутри родительского flexbox-контейнера. Следует отметить, что под это выравнивание также подпадают и анонимные флекс-итемы. Данное правило не наследуется. Выравниваются только блоки первой строки.
| align-items | |
|---|---|
| Значения: | |
| stretch | Флексбокс-блоки, если не зафиксирована высота, вытягиваются на всю высоту родительского контейнера. Является первоначальным (базовым) параметром. |
| flex-start | Предназначено для выравнивания флексбокс-итемов по верхней кромке контейнера-родителя с учетом внутренних отступов ( padding ). |
| flex-end | Предназначено для выравнивания флексбокс-итемов по нижней кромке контейнера-родителя с учетом внутренних отступов ( padding ). |
| center | Выравнивает дочерние флекс-блоки внутри флекс-контейнера по средней линии самого высокого блока. |
| baseline | Выравнивает дочерние флекс-блоки внутри родительского относительно средней линии текста в этих блоках. |
| initial | Будет установлено в первоначальное значение. |
| inherit | Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга. |
Формат записи
Следует отметить, для того, чтобы дочерние флекс-блоки растянулись на всю высоту контейнера, необходимо чтобы у них не было устанолвено фиксированной высоты: height: auto; .
1.4. Ориентация основной оси flex-direction
Применяется для задания ориентации (направленности) следования flex-блоков друг за другом. В соответствии с установленными стандартами ориентация может быть двух видов: по вертикали (в колонку, по дефолту ?) и по горизонтали (в строку, по дефолту ?).
| flex-direction | |
|---|---|
| Значения: | |
| row | Ориентация ? или ?, опираясь на направленность текста для разных языковых локаций (например, арабские и русские и так далее). Первоначальная величина. |
| row-reverse | Ориентация ? или ?, опираясь на направленность текста для разных языковых локаций (например, арабские и русские и так далее). |
| column | Ориентация ? (одноколоночное расположение). |
| column-reverse | Ориентация ? (одноколоночное расположение). |
| initial | Будет переведено в первоначальную величину. |
| inherit | Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга. |
Формат записи
1.5. Размещение в несколько строк flex-wrap
Отвечает за размещение дочерних flex-блоков в одну или несколько строк.
| flex-wrap | |
|---|---|
| Значения: | |
| nowrap | В исходном состоянии все дочерние итемы располагаются в одну строчку (? или ? в зависимости от выбранной ориентации текста). |
| wrap | При задании такого параметра дочерние итемы будут занимать несколько строк в зависимости от ширины родителя (? или ? в зависимости от выбранной ориентации текста). |
| wrap-reverse | При задании такого параметра дочерние итемы будут занимать несколько строк в зависимости от ширины родителя, имея при этом реверсивный порядок чередования. |
| initial | Будет установлено в первоначальное значение. |
| inherit | Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга. |
Формат записи
1.6. Направленность и многострочность одним правилом flex-flow
Данное правило используется, как более компактная запись двух предыдущих правил с целью оптимизации кода.
| flex-flow | |
|---|---|
| Значения: | |
| ориентация | Задает ориентацию (направленность) основной оси. По дефолту равно row . |
| многострочность | Задает расположение в несколько строк по вертикально ориентированной оси. По дефолту равно nowrap (то есть в одну строку). |
| initial | Будет установлено в первоначальное значение. |
| inherit | Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга. |
Формат записи
1.7. Выравниваем вертикально во всех строках align-content
Это цсс-правило используется для того, чтобы выровнять вертикально внутриконтейнейрные дочерние флекс-блоки. Для срабатывания этого правила необходимо, чтобы были у родительского контейнера заданы: height и flex-flow. Является не наследуемым.
| align-content | |
|---|---|
| Значения: | |
| stretch | Растягивание элементов на всю высоту родительского контейнера (у флекс-блоков не должна быть зафиксирована высота). |
| flex-start | Выравнивает поверху. |
| flex-end | Выравнивает понизу. |
| center | Выравнивает вертикально по центру. |
| space-between | Вертикально выравнивает внутриконтейнерные элементы таким образом, что первая линия блоков прижимается кверху, последняя — книзу, а пространство между остальными распределяется равномерно. |
| space-around | Вертикально выравнивает внутриконтейнерные элементы таким образом, что расстояние в начале, в конце и между ними равны между собой. |
| initial | Будет установлено в первоначальное значение. |
| inherit | Опция для сообщения css-интерпретатору, что значение нужно брать у родительского тэга. |
Пример кода
Кроме правил, используемых в отношении родителя-контейнера, во флексбокс-сетке существует несколько правил, применяемых к дочерним элементам. Рассмотрим их подробнее.
2.1. Упорядочивание блоков order
ЦСС-правило применяется для упорядочивания некоторого дочернего флекс-элемента внутри флекс-родителя. Для постановки блока в качестве первого ему необходимо указать 1, а для перемещения его в самый конец -1. Является не наследуемым.
| order | |
|---|---|
| Значения: | |
| число | Положительное или отрицательное число, означающее место расположения (порядок расположения) в очереди всех блоков. По дефолту равно 0 , то есть элементы идут строго друг за другом в порядке расположения в html-коде. |
| initial | Переводит в дефолтное состояние. |
| inherit | Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга. |
Формат записи
2.2. Базис флекс-блока flex-basis
CSS-правило, предназначенное для фиксации ширины дочернего флекс-блока внутри родительского контейнера. Задается для срабатывания двух ниже лежащих параметров. Является не наследуемым правилом.
| flex-basis | |
|---|---|
| Значения: | |
| auto | Такая опция сообщает css-интерпретатору, чтобы он устанавливал визуальную ширину блока при рендеринге браузером в соответствии с контентом внутри блока. Является дефолтной величиной. |
| число | Указывается в виде натурального числа в разных единицах измерения. |
| initial | Задает дефолтную величину. |
| inherit | Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга. |
Пример кода
Всем блокам задан базис в размере пятидесяти пикселей, а третьему — девяносто пикселей.
2.3. Пропорциональное увеличение ширины блока flex-grow
Свойство предназначено для задания цифрового показателя, который позволяет увеличить флекс-блок пропорционально его ширине. Чем больше значение, тему шире блок. Для срабатывания необходимо, чтобы была задана ширина элемента или задан базис (выше пункт 2.2). Является не наследуемым правилом.
| flex-grow | |
|---|---|
| Значения: | |
| число | Указывается в виде натурального числа или десятичной дроби, которые должны быть больше нуля. По дефолту равно 0. |
| initial | Будет установлено в исходное значение. |
| inherit | Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга. |
Формат записи
Пример отображения
2.4. Пропорциональное уменьшение ширины блока flex-shrink
Свойство предназначено для задания цифрового показателя, который позволяет сузить флекс-блок пропорционально его ширине. Чем больше значение, тему уже блок. Для срабатывания необходимо, чтобы была задана ширина элемента или задан базис (выше пункт 2.2). Является не наследуемым правилом.
| flex-shrink | |
|---|---|
| Значения: | |
| число | Указывается в виде натурального числа или десятичной дроби, которые должны быть больше нуля. По дефолту равно 1. |
| initial | Будет установлено в исходное значение. |
| inherit | Опция для сообщения css-интерпретатору, что значение нужно брать у родительского тэга. |
Формат записи
Пример отображения
В данном примере всем блокам задали сжатие в одну единицу, а третьему установили ноль (то есть не сжиматься).
2.5. Запись трех предыдущих одной строкой flex
Свойство представляет собой объединение трех выше описанных свойств (в пунктах 2.2, 2.3 и 2.4), то есть по сути является их сокращенной формой их записи. Используется с целью оптимизации css-кода.
Консорциум W3C советует всем разработчикам использовать именно сокращенную форму, так как большинство браузеров хорошо интерпретирует ее при рендеринге. Рассматриваемое правило не наследуется.
| flex | |
|---|---|
| Значения: | |
| растяжение | Данный показатель отвечает за увеличение хтмл-итема по ширине по отношению к другим итемам внутри родителя, опираясь на «базис». |
| сужение | Данный показатель отвечает за уменьшение ширины хтмл-итема по отношению к другим итемам внутри родителя, опираясь также на «базис». |
| базис | Установка данного параметра фиксирует ширину флекс-блока. Единицы измерения: пиксели, проценты и так далее. |
| auto | Значение формируется автоматически на основании принятого стандарта. Примерно тоже самое, что если задать flex: 1 1 auto; . |
| none | Отмена правила. |
| initial | Будет установлено в исходное значение. |
| inherit | Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга. |
Формат записи
Пример отображения
2.6. Выравнивание дочерних блоков align-self
Свойство используется для того, чтобы независимо от установленного во флекбокс-контейнере способа выравнивания дочерних блоков выровнять конкретный дочерний блок. Также является не наследуемым правилом.
Флексы
Выравнивает строки внутри флекс-контейнера при наличии свободного пространства по поперечной оси.
align-items
Выравнивает флекс-элементы внутри контейнера в перпендикулярном направлении.
align-self
Задаёт выравнивание отдельного элемента в контейнере по поперечной оси.
Сокращённое свойство, которое позволяет указать параметры элемента, чтобы он эффективно заполнял доступное пространство.
flex-basis
Свойство flex-basis определяет основу флекса, которая является начальным размером элемента.
flex-direction
Свойство flex-direction определяет, как флексы располагаются в контейнере относительно основных осей и их направление.
flex-flow
Является сокращённым свойством для отдельных свойств flex-direction и flex-wrap.
flex-grow
Определяет, сколько пространства может занимать флекс внутри контейнера.
flex-shrink
Определяет коэффициент сжатия флексов в контейнере.
flex-wrap
Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк.
justify-content
Определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера.
order
Определяет порядок вывода флексов внутри флекс-контейнера.
place-content
Сокращённое свойство place-content одновременно устанавливает значения свойств align-content и justify-content.
Как работает CSS Flexbox
CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси.
Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.
Модуль flexbox позволяет решать следующие задачи:
- Располагать элементы в одном из четырех направлений: слева направо, справа налево, сверху вниз или снизу вверх.
- Переопределять порядок отображения элементов.
- Автоматически определять размеры элементов таким образом, чтобы они вписывались в доступное пространство.
- Решать проблему с горизонтальным и вертикальным центрированием.
- Переносить элементы внутри контейнера, не допуская его переполнения.
- Создавать колонки одинаковой высоты.
- Создавать прижатый к низу страницы подвал сайта.
Flexbox решает специфические задачи — создание одномерных макетов, например, навигационной панели, так как flex-элементы можно размещать только по одной из осей.
Основные понятия
Для описания модуля 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-элементов, в зависимости от того, что находится в поперечном измерении, являются их поперечным размером.
Flex-контейнер
Flex-контейнер устанавливает новый гибкий контекст форматирования для его содержимого. Flex-контейнер не является блочным контейнером, поэтому для дочерних элементов не работают такие CSS-свойства, как float, clear, vertical-align. Также, на flex-контейнер не оказывают влияние свойства column-*, создающие колонки в тексте и псевдоэлементы ::first-line и ::first-letter.
Модель flexbox-разметки связана с определенным значением CSS-свойства display родительского html-элемента, содержащего внутри себя дочерние блоки. Для управления элементами с помощью этой модели нужно установить свойство display следующим образом:
После установки данных значений свойства каждый дочерний элемент автоматически становится flex-элементом, выстраиваясь в один ряд (вдоль главной оси). При этом блочные и строчные дочерние элементы ведут себя одинаково, т.е. ширина блоков равна ширине их содержимого с учетом внутренних полей и рамок элемента.
Если родительский блок содержит текст или изображения без оберток, они становятся анонимными flex-элементами. Текст выравнивается по верхнему краю блока-контейнера, а высота изображения становится равной высоте блока, т.е. оно деформируется.
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;. Для контейнеров с прокруткой автоматический минимальный размер обычно равен нулю.
Flexbox призван спасти нас от неприятных моментов чистого CSS (например, от вертикального выравнивания), и он отлично справляется со своей задачей. Но разобраться в принципах его работы порой бывает сложно, особенно, если вы новичок.
Основная задача Flexbox — сделать слои гибкими, а работу с ними — интуитивно понятными. Для достижения этой цели он позволяет контейнерам самим решать, как обращаться со своими дочерними элементами, в том числе изменять их размер и расстояние между ними.
Рассмотрев несколько основных понятий, давайте посмотрим, так ли оно гладко на практике. В этой статье мы изучим несколько самых популярных свойств Flexbox, разберемся, что они делают, и как они на самом деле работают.
Display: Flex
Вот пример страницы:
У нас есть 4 разноцветных div’а разных размеров, которые находятся внутри серого div’а. У каждого div’а есть свойство display: black. Поэтому каждый квадрат занимает всю ширину строки.
Чтобы начать работать с Flexbox, нам нужно сделать наш контейнер flex-контейнером. Делается это так:
Вроде бы ничего особо и не изменилось — div’ы всего лишь встали в ряд. Но вы сделали что-то действительно мощное. Вы дали вашим квадратам классное свойство, называемое “flex-контекст”.
Flex Direction
У flex-контейнера есть две оси: главная ось и перпендикулярная ей.
По умолчанию все предметы располагаются вдоль главной оси: слева направо. Поэтому наши квадраты выровнялись в линию, когда мы применили display: flex. Однако flex — direction позволяет вращать главную ось.
Justify Content
Justify-content отвечает за выравнивание элементов по главной оси/
Вернемся к flex-directional: row.
Justify-content может принимать 5 значений:
- flex-start;
- flex-end;
- center;
- space-between;
- space-around .
Space-between задает одинаковое расстояние между квадратами, но не между контейнером и квадратами. Space-around также задает одинаковое расстояние между квадратами, но теперь расстояние между контейнером и квадратами равно половине расстояния между квадратами.
Align Self
Align-self позволяет выравнивать элементы по отдельности.
Давайте для двух квадратов применим align-self, а для остальных применим align-items: center и flex-directional: row.
Flex Grow
Это свойство немного сложнее.
Для начала давайте зададим нашим квадратикам одинаковую ширину в 120px:
По умолчанию значение flex — grow равно 0. Это значит, что квадратам запрещено расти (занимать оставшееся место в контейнере).
Попробуем задать flex-grow равным 1 для каждого квадрата:
Квадраты заняли оставшееся место в контейнере. Значение flex-grow аннулирует значение ширины.
Но здесь возникает один вопрос: что значит flex-grow: 1?
Попробуем задать flex-grow равным 999:
И… ничего не произошло. Так получилось из-за того, что flex-grow принимает не абсолютные значения, а относительные.
Это значит, что не важно, какое значение у flex-grow, важно, какое оно по отношению к другим квадратам:
Вначале flex-grow каждого квадрата равен 1, в сумме получится 6. Значит, наш контейнер поделен на 6 частей. Каждый квадрат будет занимать 1/6 часть доступного пространства в контейнере.
Когда flex-grow третьего квадрата становится равным 2, контейнер делится на 7 частей (1 + 1 + 2 + 1 + 1 + 1).
Теперь третий квадрат занимает 2/7 пространства, остальные — по 1/7.
Стоит помнить, что flex-grow работает только для главной оси (пока мы не поменяем ее направление).
Заключение
Несмотря на то, что мы рассмотрели только поверхность Flexbox, этих команд должно быть достаточно для обработки большинства основных выравниваний и вертикального расположения элементов к сердцу вашего содержимого.