Руководство по Flexbox

Flexbox, также называемый модулем Flexible Box, является одной из двух современных систем макетов наряду с CSS Grid.

Вступление

Flexbox, также называемый модулем Flexible Box, является одной из двух современных систем макетов, наряду с CSS Grid.

По сравнению с CSS Grid (двумерным) flexbox - этоодномерная компоновочная модель. Он будет управлять макетом на основе строки или столбца, но не вместе одновременно.

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

Если вам не нужна поддержка старых браузеров, таких как IE8 и IE9, Flexbox - это инструмент, который позволяет забыть об использовании

Макеты таблиц
Поплавки
clearfix хаки
display: tableхаки

Давайте погрузимся в flexbox и за очень короткое время станем им мастером.

Поддержка браузера

На момент написания (февраль 2018 г.) его поддерживали 97,66% пользователей, все наиболее важные браузеры реализуют его на протяжении многих лет, поэтому охватываются даже старые браузеры (включая IE10 +):

Browser support

Хотя мы должны подождать несколько лет, пока пользователи наверстают упущенное с CSS Grid, Flexbox - более старая технология, и ее можно использовать прямо сейчас.

Включить Flexbox

Макет flexbox применяется к контейнеру путем установки

display: flex;

или же

display: inline-flex;

Контентвнутри контейнерабудет выровнен с помощью flexbox.

Свойства контейнера

Некоторые свойства flexbox применяются к контейнеру, который устанавливает общие правила для его элементов. Они есть

flex-direction
justify-content
align-items
flex-wrap
flex-flow

Выровнять строки или столбцы

Первое свойство, которое мы видим,flex-direction, определяет, должен ли контейнер выравнивать свои элементы как строки или как столбцы:

flex-direction: rowразмещает предметы какряд, в направлении текста (слева направо для западных стран)
flex-direction: row-reverseразмещает предметы так же, какrowно в обратном направлении
flex-direction: columnпомещает предметы встолбец, заказывая сверху вниз
flex-direction: column-reverseпомещает элементы в столбец, как иcolumnно в обратном направлении

Rows or columns

Вертикальное и горизонтальное выравнивание

По умолчанию элементы начинаются слева, еслиflex-directionявляетсяrow, и сверху, еслиflex-directionявляетсяcolumn.

Vertical and horizontal alignment

Вы можете изменить это поведение, используяjustify-contentдля изменения горизонтального выравнивания иalign-itemsдля изменения вертикального выравнивания.

Измените горизонтальное выравнивание

justify-contentимеет 5 возможных значений:

flex-start: выровнять по левой стороне контейнера.
flex-end: выровнять по правой стороне контейнера.
center: выровнять по центру контейнера.
space-between: отображать с равным интервалом между ними.
space-around: отображать с равным интервалом вокруг них

Horizontal alignment

Измените вертикальное выравнивание

align-itemsимеет 5 возможных значений:

flex-start: выровнять по верху контейнера.
flex-end: выровнять по дну контейнера.
center: выровнять по вертикальному центру контейнера.
baseline: отображать на базовой линии контейнера.
stretch: элементы растягиваются по размеру контейнера.

Vertical alignment

Примечание о`baseline`

baselineвыглядит похоже наflex-startв этом примере из-за того, что мои коробки слишком просты. Проверитьэтот Codepenчтобы иметь более полезный пример, который я разветвил из пера, изначально созданногоМартин Михалек. Как видите, размеры предметов выровнены.

Сворачивать

По умолчанию элементы в контейнере flexbox хранятся в одной строке, сжимая их, чтобы поместиться в контейнер.

Чтобы заставить элементы распределиться по нескольким строкам, используйтеflex-wrap: wrap. Это распределит элементы в соответствии с порядком, установленным вflex-direction. Использоватьflex-wrap: wrap-reverseчтобы изменить этот порядок.

Сокращенное свойство, называемоеflex-flowпозволяет указатьflex-directionиflex-wrapв одну строку, добавивflex-directionсначала значение, затемflex-wrapзначение, например:flex-flow: row wrap.

Свойства, применимые к каждому отдельному элементу

С этого момента мы увидели свойства, которые можно применить к контейнеру.

Отдельные элементы могут обладать определенной степенью независимости и гибкости, и вы можете изменять их внешний вид, используя эти свойства:

order
align-self
flex-grow
flex-shrink
flex-basis
flex

Посмотрим на них подробнее.

Перемещение предметов до / после другого с использованием порядка

Товары упорядочиваются в соответствии с порядком их назначения. По умолчанию каждый товар имеет порядок0а внешний вид в HTML определяет окончательный порядок.

Вы можете переопределить это свойство, используяorderпо каждому отдельному пункту. Это свойство, которое вы устанавливаете для элемента, а не для контейнера. Вы можете сделать так, чтобы элемент отображался раньше всех, установив отрицательное значение.

Moving items before or after another one

Вертикальное выравнивание с помощью align-self

Элемент может выбратьотвергатьконтейнерalign-itemsустановка, используяalign-self, который имеет те же 5 возможных значенийalign-items:

flex-start: выровнять по верху контейнера.
flex-end: выровнять по дну контейнера.
center: выровнять по вертикальному центру контейнера.
baseline: отображать на базовой линии контейнера.
stretch: элементы растягиваются по размеру контейнера.

Vertical alignment

При необходимости увеличьте или уменьшите предмет

гибкий рост

The defaut for any item is 0.

Если все элементы определены как 1, а один определен как 2, более крупный элемент займет пространство двух элементов «1».

гибко-усадочный

The defaut for any item is 1.

Если все элементы определены как 1, а один определен как 3, более крупный элемент будет уменьшаться в 3 раза по сравнению с другими. Когда доступно меньше места, потребуется в 3 раза меньше места.

гибкая основа

Если установлено наauto, он изменяет размер элемента в соответствии с его шириной или высотой и добавляет дополнительное пространство в зависимости отflex-growсвойство.

Если установлено значение 0, при расчете макета дополнительное пространство для элемента не добавляется.

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

сгибать

Это свойство сочетает в себе 3 вышеупомянутых свойства:

flex-grow
flex-shrink
flex-basis

и предоставляет сокращенный синтаксис:flex: 0 1 auto

Скачать мою бесплатнуюСправочник CSS