Flexbox ms: Полное руководство по Flexbox | Frontender Magazine — Вебджем.рф

Содержание

Префиксы для flexbox CSS (кросбраузерный flexbox) — Блого-дарю

/*********************************

префиксы для flex-контейнера

*********************************/

.flex {

display: flex;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: inline-flex;

display: -webkit-inline-box;

display: -webkit-inline-flex;

display: -ms-inline-flexbox;

flex-direction: column;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-wrap: wrap;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-flow: column wrap;

-webkit-flex-flow: column wrap;

-ms-flex-flow: column wrap;

justify-content: space-between;

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

align-content: space-around;

-webkit-align-content: space-around;

-ms-flex-line-pack: distribute;

align-items: center

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

}

/******************************

префиксы для flex-элементов

******************************/

.flex-item {

flex-grow: 1;

-webkit-box-flex: 1;

-webkit-flex-grow: 1;

-ms-flex-positive: 1;

flex-shrink: 3;

-webkit-flex-shrink: 3;

-ms-flex-negative: 3;

flex-basis: 200px;

-webkit-flex-basis: 200px;

-ms-flex-preferred-size: 200px;

flex: 1 3 200px;

-webkit-box-flex: 1;

-webkit-flex: 1 3 200px;

-ms-flex: 1 3 200px;

align-self: center;

-webkit-align-self: center;

-ms-flex-item-align: center;

order: 3;

-webkit-box-ordinal-group: 3;

-webkit-order: 3;

-ms-flex-order: 3;

}

CSS3 flexbox — описание всех свойств модуля, примеры верстки

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси.

Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.

Модуль flexbox позволяет решать следующие задачи:

Располагать элементы в одном из четырех направлений: слева направо, справа налево, сверху вниз или снизу вверх.
Переопределять порядок отображения элементов.
Автоматически определять размеры элементов таким образом, чтобы они вписывались в доступное пространство.
Решать проблему с горизонтальным и вертикальным центрированием.
Переносить элементы внутри контейнера, не допуская его переполнения.
Создавать колонки одинаковой высоты.

Создавать прижатый к низу страницы подвал сайта.

Flexbox решает специфические задачи — создание одномерных макетов, например, навигационной панели, так как flex-элементы можно размещать только по одной из осей.

Список текущих проблем модуля и кросс-браузерных решений для них вы можете прочитать в статье Philip Walton Flexbugs.

Что такое flexbox

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

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. Основные понятия

Рис. 1. Модель flexbox

Для описания модуля 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. Режим строки и колонки

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-элементом, выстраиваясь в один ряд (вдоль главной оси). При этом блочные и строчные дочерние элементы ведут себя одинаково, т.е. ширина блоков равна ширине их содержимого с учетом внутренних полей и рамок элемента.

Рис. 3. Выравнивание элементов в модели flexbox

Если родительский блок содержит текст или изображения без оберток, они становятся анонимными 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`	Наследует значение свойства от родительского элемента.

Рис. 4. Свойство flex-direction для left-to-right языков

Синтаксис

.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`	Наследует значение свойства от родительского элемента.

Рис. 5. Управление многострочностью с помощью свойства flex-wrap для LTR-языков

Синтаксис

.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;
}

Рис. 6. Порядок отображения flex-элементов

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`	Устанавливает значение свойства в значение по умолчанию. Эквивалентно `flex: 0 1 auto;`.
`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`	Наследует значение свойства от родительского элемента.

Рис. 7. Управление свободным пространством в панели навигации с помощью flex-grow

Синтаксис

.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`	Наследует значение свойства от родительского элемента.

Рис. 8. Сужение flex-элементов в строке

Синтаксис

.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`	Наследует значение свойства от родительского элемента.

Рис. 9. Выравнивание элементов и распределение свободного пространства с помощью свойства justify-content

Синтаксис

.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`	Наследует значение свойства от родительского элемента.

Рис. 10. Выравнивание элементов в контейнере по вертикали

Синтаксис

.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`	Наследует значение свойства от родительского элемента.

Рис. 11. Выравнивание отдельных flex-элементов

Синтаксис

.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-align-self: center; 
align-self: center;
}

6.3. Выравнивание строк flex-контейнера: align-content

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

align-content
Значения:
`flex-start`	Строки укладываются по направлению к началу flex-контейнера. Край первой строки помещается вплотную к краю flex-контейнера, каждая последующая — вплотную к предыдущей строке.
`flex-end`	Строки укладываются по направлению к концу flex-контейнера. Край последней строки помещается вплотную к краю flex-контейнера, каждая предыдущая — вплотную к последующей строке.
`center`	Строки укладываются по направлению к центру flex-контейнера. Строки расположены вплотную друг к другу и выровнены по центру flex-контейнера с равным расстоянием между начальным краем содержимого flex-контейнера и первой строкой и между конечным краем содержимого flex-контейнера и последней строкой.
`space-between`	Строки равномерно распределены в flex-контейнере. Если оставшееся свободное пространство отрицательно или в flex-контейнере имеется только одна flex-линия, это значение идентично `flex-start`. В противном случае край первой строки помещается вплотную к начальному краю содержимого flex-контейнера, край последней строки — вплотную к конечному краю содержимого flex-контейнера. Остальные строки распределены так, чтобы расстояние между любыми двумя соседними строками было одинаковым.
`space-around`	Строки равномерно распределены в flex-контейнере с половинным пробелом на обоих концах. Если оставшееся свободное пространство отрицательно, это значение идентично цент`center`. В противном случае строки распределяются таким образом, чтобы расстояние между любыми двумя соседними строками было одинаковым, а расстояние между первой / последней строками и краями содержимого flex-контейнера составляло половину от расстояния между строками.
`stretch`	Значение по умолчанию. Строки flex-элементов равномерно растягиваются, заполняя все доступное пространство. Если оставшееся свободное пространство отрицательно, это значение идентично `flex-start`. В противном случае свободное пространство будет разделено поровну между всеми строками, увеличивая их поперечный размер.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Рис. 12. Многострочное выравнивание flex-элементов

Синтаксис

.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

Обратная совместимость Flexbox — CSS

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

Как и все спецификации CSS, flexbox претерпела огромное количество изменений, прежде чем стать Кандидатом в рекомендации W3C. У спецификации в этом статусе не должно быть значительных изменений, однако с предыдущими итерациями все было иначе.

Flexbox был реализован экспериментальным путём в нескольких браузерах. В то время метод создания экспериментальных реализаций подразумевал использование вендорных префиксов. Идея этих префиксов была в том, чтобы позволить инженерам браузеров и веб-разработчикам исследовать и протестировать новшества спецификации без конфликтов с другими реализациями. Идея заключалась в том, чтобы не использовать экспериментальные реализации на продакшене. Однако, в конечном счёте префиксы всё равно попали в продакшн, и изменения в экспериментальной спецификации вынудили людей обновлять сайты, чтобы этой самой спецификации соответствовать.

В 2009 спецификация выглядела совсем по-другому. Чтобы создать flex-контейнер, вам нужно было использовать display: box и несколько box-* свойств, которые делали то, что сегодня вы понимаете под flexbox.

Очередное обновление спецификации поменяло синтаксис на display: flexbox — и опять с вендорными префиксами.

В конечном счёте спецификация была обновлена, чтобы определить display: flex как способ создания flex-контейнера. Начиная с этого момента поддержка браузерами обновлённой версии спецификации отличная.

Существует несколько старых статей, которые описывают более ранние версии flexbox, их довольно легко вычислить по тому, как они описывают создание flex-контейнера. Если вы нашли что-то вроде display: box или display: flexbox, то это уже устаревшая информация.

Браузеры отлично поддерживают flexbox, и на данный момент большинству из них не нужны префиксы для этого. Safari последним из основных браузеров избавился от префиксов после релиза Safari 9 в 2015. Два браузера, о которых вам нужно помнить для обеспечения кроссбраузерности, это:

Internet Explorer 10, который внедрил display: flexbox версию спецификации с префиксом -ms-.
UC Browser, который все ещё поддерживает спецификацию версии 2009 год с display: box и префиксом -webkit-.

Также возьмите на заметку, что Explorer 11 поддерживает современный display: flex, однако не без багов.

The majority of issues with flexbox relate to the changes in the specification, as it has been developed, and the fact that many of us were attempting to use an experimental specification in production. If you are trying to ensure backwards compatibility with old versions of browsers, and in particular IE10 and 11, the Flexbugs site is a helpful resource. You will see that many of the listed bugs apply to old browser versions and are fixed in current browsers. Each of the bugs has a workaround listed — which can save you many hours of puzzling.

If you want to include very old browsers with flexbox support then you can include the vendor prefixes in your CSS in addition to the unprefixed version. This is becoming less and less of a requirement today as support is widespread.

.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

Autoprefixer Online is a useful way to see which prefixes are recommended, depending on how many versions you wish to go back with browser support. You can also check Can I Use for information about when prefixes were removed in browsers to make your decision.

Given that flexbox usage is initiated with value of the display property, when needing to support very old browsers which do not support flexbox at all, fallbacks can be created by overwriting one layout method with another. The specification defines what happens if you use other layout methods on an element which then becomes a flex item.

Floated items

“float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.” — 3. Flex Containers

In the following live example, I have floated two blocks and then set display: flex on the container. The items are now flex items, which means they stretch to equal height. Any float behaviour does not apply.

You can test the fallback behaviour by removing display: flex from the wrapper.

display: inline-block

Once an inline-block item becomes a flex item, it is blockified and so behavior of display: inline-block like preserving white space between items no longer applies.

Remove display: flex to see the fallback behavior. You’ll see white space added between the items, which is what happens when using display: inine-block as it prefers white space like other inline items.

display: table-

The CSS table display properties are potentially very useful as a fallback, due to the fact that they allow design patterns such as full height columns and vertical centering and work back as far as Internet Explorer 8.

If you use display: table-cell on an item in your HTML it takes on the styling of an HTML table cell. CSS creates anonymous boxes to represent these items so that you do not need to wrap each item in a wrapper to represent the HTML table row, and a second one to represent the table element itself, You can’t see or style these anonymous boxes; they are there purely to fix up the tree.

If you then declare display: flex on the parent item, these anonymous boxes do not get created and so your item remains a direct child and can become a flex item — losing any of the table display features.

“Note: Some values of display normally trigger the creation of anonymous boxes around the original box. If such a box is a flex item, it is blockified first, and so anonymous box creation will not happen. For example, two contiguous flex items with display: table-cell will become two separate display: block flex items, instead of being wrapped into a single anonymous table.” — 4. Flex Items

The vertical-align property

The live example below demonstrates use of the vertical-align property along with display: inline-block. Both display: table-cell and display: inline-block allow for the use of this property. Use of vertical-align enables vertical alignment prior to flexbox. The property is ignored by flexbox and so you can use it in conjunction with display: table-cell or display: inline-block as a fallback and then safely use box alignment properties in flexbox instead.

You can use feature queries to detect flexbox support:

@supports (display: flex) {
  // code for supporting browsers
}

Note that Internet Explorer 11 does not support feature queries yet does support flexbox. If you decide the IE11 implementation is too buggy and you wish to serve it the fallback layout then you could use feature queries to serve flexbox rules only to those browsers with good flexbox support. Remember that if you want to include versions of browsers that had vendor-prefixed flexbox you would need to include the prefixed version in your feature query. The following feature query would include UC Browser, which supports feature queries and old flexbox syntax, prefixed:

@supports (display: flex) or (display: -webkit-box) {
  // code for supporting browsers
}

For more information about using Feature Queries see Using Feature Queries in CSS on the Mozilla Hacks blog.

While I’ve spent some time in this guide going through potential issues and fallbacks, flexbox is very much ready for you to be using in production work. This guide will help you in those cases where you do come across an issue or have the requirement to support older browsers.

flex — CSS | MDN


flex: none;


flex: 2;


flex: 10em;
flex: 30px;
flex: auto;
flex: content;


flex: 1 30px;


flex: 2 2;


flex: 2 2 10%;


flex: inherit;
flex: initial;
flex: unset;

Значения

<'flex-grow'>: Определяет flex-grow для флекс элемента. Смотри <number> для большей информации. Негативные значения считаются недействительными. Значение по умолчанию 0, если не указано.
<'flex-shrink'>: Определяет flex-shrink для флекс элемента. Смотри <number> для большей информации. Негативные значения считаются недействительными. Значение по умолчанию 1, если не указано.
<'flex-basis'>: Определяет flex-basis для флекс элемента. Любое корректное значение для высоты(height) и ширины(width) — корректно и для данного свойства. Предпочтительный размер 0 должен иметь единицу измерения, чтобы не восприниматься как гибкий. Значение по умолчанию 0%, если не указано.
none: Размер элемента устанавливается в соответствии с его свойствами width и height. Он полностью негибкий: не сжимается и не увеличивается по отношению к гибкому контейнеру. Эквивалентно значению «flex: 0 0 auto«.
Формальный синтаксис

none | (en-US) [ (en-US) <'flex-grow'> <'flex-shrink'>? (en-US) || (en-US) <'flex-basis'> ] (en-US)

#flex-container {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
}

#flex-container > .flex-item {
	-webkit-flex: auto;
	flex: auto;
}

#flex-container > .raw-item {
	width: 5rem;
}

<div>
    <div>Flex box (click to toggle raw box)</div>
    <div>Raw box</div>
</div>

Результат

BCD tables only load in the browser

Почему display: — ms-flex; -ms-justify-content: center; не работает в IE10?

Почему следующий код не работает в IE10?

.foo {
    display: -ms-flex; 
    -ms-justify-content: center;
}

Что мне нужно написать, чтобы они работали?

css internet-explorer-10 flexbox justify
Поделиться Источник user2590633 17 июля 2013 в 09:18
2 ответа
ie10 и flexboxes? (кошмар)
К сожалению, мне нужно сделать код моего сайта совместимым с Internet Explorer 10, и у меня возникли некоторые проблемы, даже после прочтения документации на их официальном сайте вот мой код css: .uberflex { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start;…
Flexbox в IE10
Я пытаюсь заставить flex box работать в IE10, но он не работает. Safari, Chrome и Firefox работают нормально, но IE10 не хочет работать. Кто-нибудь знает ответ? сайт CodePen: http://codepen.io/anon/pen/vcEGH / display: -moz-box; /* OLD — Firefox 19- (doesn’t work very well) */ display:…

49

IE10 реализовал проект Flexbox с марта 2012 года . Эти свойства соответствуют этим:
.foo { display: -ms-flexbox; -ms-flex-pack: center; }
Поделиться cimmanon 17 июля 2013 в 10:11

24

Хорошим местом для начала при попытке получить правильный синтаксис для всех браузеров является http://the-echoplex.net/flexyboxes/
Для центрирования элементов по горизонтали и вертикали в контейнере вы получите код примерно такой: (работает в Chrome,FF,Opera 12.1+ и IE 10+)
FIDDLE
<div> <div>A</div> <div>B</div> <div>C</div> </div>
CSS
.flex-container { height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -moz-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .flex-item { width: 100px; height:100px; background: brown; margin: 0 10px; } /* Legacy Firefox implementation treats all flex containers as inline-block elements. */ @-moz-document url-prefix() { .flex-container { width: 100%; -moz-box-sizing: border-box; } }
Поделиться Danield 17 июля 2013 в 10:20
Похожие вопросы:

Почему justify-content: center не работает в IE?
У меня есть этот простой div с кнопкой внутри него . justify-content: center; отлично работает с использованием Firefox и Chrome, но не работает на IE 11: #div { height: 200px; width: 50px; border:…

Chrome не правильно переопределяет justify-content для flex box
У меня возникла проблема в Chrome 40.0.2214.93, когда, если я переопределяю justify-content для элемента, я получаю какое-то неожиданное поведение. Я создал JS Fiddle для этого здесь:…

Проблемы с IE10 и flexbox — проект марта 2012 года не работает?
Я пытаюсь сделать свой макет flexbox совместимым с IE10, который, насколько мне известно, использует проект flexboxes от марта 2012 года. Я перепробовал все чертовы синтаксисы и их вариации, но…

ie10 и flexboxes? (кошмар)
К сожалению, мне нужно сделать код моего сайта совместимым с Internet Explorer 10, и у меня возникли некоторые проблемы, даже после прочтения документации на их официальном сайте вот мой код css:…

Flexbox в IE10
Я пытаюсь заставить flex box работать в IE10, но он не работает. Safari, Chrome и Firefox работают нормально, но IE10 не хочет работать. Кто-нибудь знает ответ? сайт CodePen:…

Flex auto margin не работает в IE10 / 11
У меня есть сложный макет, где я центрирую различные элементы по вертикали и горизонтали с помощью flexbox. Затем последний элемент имеет margin-right:auto; , применяемый для выталкивания элементов…

— ms-flexbox не работает в IE8
Во первых я написал: display: flex; justify-content: space-between; и он работал для IE11, но потом я понял, что он не работает для IE8, поэтому я добавил еще две строки: display: flex;…

дисплей: flex не работает в Интернете Explorer
Мой гибкий контейнер: .back_pattern { display: flex; display: -ms-flexbox; -ms-flex-pack: center; flex-direction: column; align-content: center; justify-content: center; min-height: 100vh; width:…

justify-content: центр не работает на flex:100% в мобильном телефоне
Я пытаюсь построить сетку ссылок на кнопки размером 3 на 3 flexbox, которая будет реагировать. Сетка отлично смотрится на рабочем столе и планшете, однако в мобильной версии элементы выровнены по…

CSS justify-content: пробел между IE11 работает неправильно
В моем проекте у меня есть progressbar, и он отлично работает во всех браузерах, кроме IE11 (<11 я не поддерживаю). Во всех браузерах это выглядит так: А в IE11 это выглядит так: я не знаю,…
Flexbox, теперь понятно — Пепелсбей.net
Flexbox, теперь понятно — Пепелсбей.net
Вадим Макеев, Opera Software
Flexbox, теперь понятно
Flexbox
68,51%
Первая система раскладки, которая не хак
prozrachniy.gif
<br clear=all>
Flexbox
Flexbox 09
Flexbox 09
Flexbox 11
Flexbox 12
Flexbox 12
Собственно
Оси
Привычный CSS
E { top: 0; bottom: 0; text-align: center; vertical-align: middle; }
Главная
Поперечная
Пушкин. Зимний вечер
Пушкин. Зимний вечер
<div> <div>буря мглою</div> <div>небо кроет</div> <div>вихри снежные</div> <div>крутя</div> </div>
Пушкин. Зимний вечер
.poem { overflow: hidden; height: 640px; } .poem div { float: left; }
Пушкин. Зимний вечер
.poem div:first-child { background: #090; } .poem div:last-child { background: #C00; }
буря мглою
небо кроет
вихри снежные
крутя
Включаем Flexbox
.poem { display: flex; }
буря мглою
небо кроет
вихри снежные
крутя
Меняем направление по оси
.poem { display: flex; flex-direction: row; flex-direction: row-reverse; }
буря мглою
небо кроет
вихри снежные
крутя
Поворачиваем саму ось
.poem { display: flex; flex-direction: column; }
буря мглою
небо кроет
вихри снежные
крутя
Меняем направление по оси
.poem { display: flex; flex-direction: column-reverse; }
буря мглою
небо кроет
вихри снежные
крутя
буря мглою
небо кроет
вихри снежные
крутя
Што?
Вдоль
буря мглою
небо кроет
вихри снежные
крутя
Вдоль направо
.poem { display: flex; justify-content: flex-start; justify-content: flex-end; }
буря мглою
небо кроет
вихри снежные
крутя
Вдоль посередине
.poem { display: flex; justify-content: center; }
буря мглою
небо кроет
вихри снежные
крутя
Вдоль равномерно
.poem { display: flex; justify-content: space-between; }
буря мглою
небо кроет
вихри снежные
крутя
Вдоль красиво
.poem { display: flex; justify-content: space-around; }
буря мглою
небо кроет
вихри снежные
крутя
Перестановка
буря мглою
небо кроет
вихри снежные
крутя
буря мглою
небо кроет
вихри снежные
крутя
Меняем порядок
.poem div:nth-child(2) { order: 1; }
буря мглою
небо кроет
вихри снежные
крутя
Меняем порядок
.poem div { order: 4; }
буря мглою
небо кроет
вихри снежные
крутя
Меняем порядок
.poem div:nth-child(1) { order: 2 } .poem div:nth-child(2) { order: 1 } .poem div:nth-child(3) { order: 4 } .poem div:nth-child(4) { order: 3 }
буря мглою
небо кроет
вихри снежные
крутя
Поперёк
Даём высоту
.poem div { height: 250px; }
буря мглою
небо кроет
вихри снежные
крутя
Поперёк внизу
.poem { display: flex; align-items: flex-start; align-items: flex-end; }
буря мглою
небо кроет
вихри снежные
крутя
Поперёк посередине
.poem { display: flex; align-items: center; }
буря мглою
небо кроет
вихри снежные
крутя
Поперёк индивидуально
.poem div:nth-child(1) { align-self: flex-start; } .poem div:nth-child(4) { align-self: flex-end; }
буря мглою
небо кроет
вихри снежные
крутя
Центрирование
.poem { display: flex; } .poem div { margin: auto; }
Растягивание
буря мглою
небо кроет
вихри снежные
крутя
Растягивание
.poem div { flex-grow: 1; }
Растягивание
.poem div { flex-grow: 1; } .poem div:nth-child(1) { flex-grow: 4; }
Сжатие
.poem div { width: 25%; } .poem div:nth-child(1) { flex-shrink: 4; }
Запас
.poem div { flex-grow: 1; } .poem div:nth-child(1) { flex-basis: 250px; }
Весь Пушкин
Многострочный Flexbox
буря мглою
небо кроет
вихри снежные
крутя
то
как зверь
она
завоет
то заплачет
как дитя
то по кровле
обветшалой
вдруг соломой
зашумит
то как
путник запоздалый
к нам в окошко
застучит
буря мглою
небо кроет
вихри снежные
крутя
то
как зверь
она
завоет
то заплачет
как дитя
то по кровле
обветшалой
вдруг соломой
зашумит
то как
путник запоздалый
к нам в окошко
застучит
Перенос
.poem { display: flex; flex-wrap: nowrap; flex-wrap: wrap; }
буря мглою
небо кроет
вихри снежные
крутя
то
как зверь
она
завоет
то заплачет
как дитя
то по кровле
обветшалой
вдруг соломой
зашумит
то как
путник запоздалый
к нам в окошко
застучит
Перенос наоборот
.poem { display: flex; flex-wrap: wrap-reverse; }
буря мглою
небо кроет
вихри снежные
крутя
то
как зверь
она
завоет
то заплачет
как дитя
то по кровле
обветшалой
вдруг соломой
зашумит
то как
путник запоздалый
к нам в окошко
застучит
буря мглою
небо кроет
вихри снежные
крутя
то
как зверь
она
завоет
то заплачет
как дитя
то по кровле
обветшалой
вдруг соломой
зашумит
то как
путник запоздалый
к нам в окошко
застучит
Порядок поперёк
.poem { display: flex; align-content: stretch; align-content: center; }
Только для многострочных блоков!
буря мглою
небо кроет
вихри снежные
крутя
то
как зверь
она
завоет
то заплачет
как дитя
то по кровле
обветшалой
вдруг соломой
зашумит
то как
путник запоздалый
к нам в окошко
застучит
буря мглою
небо кроет
вихри снежные
крутя
то
как зверь
она
завоет
то заплачет
как дитя
то по кровле
обветшалой
вдруг соломой
зашумит
то как
путник запоздалый
к нам в окошко
застучит
буря мглою
небо кроет
вихри снежные
крутя
то
как зверь
она
завоет
то заплачет
как дитя
то по кровле
обветшалой
вдруг соломой
зашумит
то как
путник запоздалый
к нам в окошко
застучит
буря мглою
небо кроет
вихри снежные
крутя
то
как зверь
она
завоет
то заплачет
как дитя
то по кровле
обветшалой
вдруг соломой
зашумит
то как
путник запоздалый
к нам в окошко
застучит
Многострочный Flexbox в Firefox?
Фолбеки на старый Flexbox
Включение Flexbox
E { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
Растягивание блоков
E { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; }
Прямая колонка
E { -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; }
Обратная колонка
E { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -moz-box-orient: vertical; -moz-box-direction: reverse; -ms-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; }
Обратный ряд
E { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -moz-box-orient: horizontal; -moz-box-direction: reverse; -ms-flex-direction: row-reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; }
Вдоль равномерно
E { -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; }
Поперёк посередине
E { -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; }
Перестановка
E { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; }
Читать
Flexbox, теперь понятно
Вадим Макеев, Opera Software
Презентация: pepelsbey.net/pres/flexbox-gotcha
Powered by Shower
История флексбокс (-moz-box, -ms-flexbox, -webkit-flex) — Фронтенд сегодня
Флексбокс (Flexbox)… Немало статей написано о том, как его использовать, что он из себя представляет. Думаю, каждый фронтенд-разработчик на этом собаку съел. Сложно представить, что было бы, если до сих пор верстали макеты на float, inline-block и table. Ведь их предназначение совсем в другом. К счастью, технологии не стают на месте и с каждым днем появляется что-то новое, которое упрощает процесс разработки. Одним из них был flexbox, который дал нам инструмент для создания сложных, гибких макетов, и функции, которые были сложны в традиционных методах CSS.
Давайте, разберемся с чего все началось. Итак, поехали!
Примерно в 2000-х годах Mozilla внедрила себе XUL, чтобы упростить и ускорить разработку своих приложений, как Firefox. Это был язык разметки для создания динамических пользовательских интерфейсов на основе XML, разработанная компанией Netscape в 1997 году. Пример интерфейсов можно посмотреть тут (открывать в браузере Firefox или любом другом браузере на движке Gecko). В XUL была представлена «блочная модель» (The Box Model), которая обеспечила значительную гибкость в дизайне интерфейсов. Она позволила располагать, помещать и позиционировать элементы так, как мы хотим. Модель определила:
сколько места занимают элементы по отношению к своим собратьям и содержащим их элементам;
ориентация элементов;
отношение элементов друг к другу.
Где-то до 2008 года CSS Working Group обсуждала идею гибкой блочной модели на основе XUL и XAML. В 2009 году Mozilla предложила добавить свою систему в CSS. На тот момент (с 2006 года), часть ее свойств (box-orient, box-direction, box-align, box-flex, box-pack) уже экспериментально (как расширение для стандарта CSS) были внедрены в Firefox 2.0 c префиксом -moz-. 23 июля 2009 года W3C опубликовала первый рабочий черновик “Flexible Box Layout Module”, который значительно отличался от текущей спецификации. Чтобы создать flex-контейнер, нужно было использовать display: box и несколько box-* свойств (orient, flex, align, direction,flex-group, lines, ordinal-group, pack), которые частично делали то, что сегодня предлагает нам flexbox. Предложенный синтаксис поддерживается в Firefox 2-21 (-moz-), частично в Safari 3.1-6 (-webkit-), Chrome 4-21 (-webkit-), iOS 3.2-6.1 (-webkit-), Android 2.1-4.3 (-webkit-).
Реализация модуля в разных браузерах была неполным и слега различалась, алгоритм компоновки был медленным. В 2011 году пришел Таб Эткинс (Tab Atkins) и полностью переписал спецификацию: display: box заменили на display: flexbox. После нескольких поправок, в марте 2012 года был предложен новый рабочий черновик, который разделил и объединил некоторые свойства модуля. Все, что начиналось на box-* было заменено на flex-*. Этот синтаксис поддерживается в IE 10, с использованием префикса -ms-.
В сентябре 2012 года публикуется очередная спецификация со статусом Candidate Recommendation. В новом синтаксисе теперь flex-контейнер создается с помощью display: flex. Поддерживается в Chrome 21-28 (-webkit-), Chrome 29+, Firefox 22-27 (-moz-), Firefox 28+, Opera 17+, в Safari 6-8 (-webkit-), Safari 9+, IE11+, Edge 12+, Android 4.4+, iOS 7-8.4 (-webkit-), iOS 9.2+.
На сегодняшний день браузеры отлично поддерживают флексбокс без всяких префиксов. В 2015 году Safari последним из основных браузеров избавился от префиксов, после релиза Safari 9. Большинство проблем с флексбокс связана с изменениями спецификации по мере ее разработки. Многие пытались использовать экспериментальные варианты в производстве. Поэтому, при использовании autoprefixer от Андрея Ситника, в вашем CSS коде появляются странные свойства как -moz-box, -ms-flexbox, -webkit-flex, чтоб хоть как-то дать шанс flexbox показать себя.
Обратная совместимость Flexbox — CSS: каскадные таблицы стилей
Flexbox очень хорошо поддерживается современными браузерами, однако есть несколько проблем, с которыми вы можете столкнуться. В этом руководстве мы рассмотрим, насколько хорошо Flexbox поддерживается в браузерах, а также рассмотрим некоторые потенциальные проблемы, ресурсы и методы для создания обходных путей и резервных вариантов.
Как и все спецификации CSS, спецификация Flexbox претерпела множество изменений, прежде чем стала кандидатом в рекомендацию, который у нас есть сегодня.В качестве кандидата в рекомендацию мы не должны видеть больших изменений на данном этапе спецификации, однако этого не было в предыдущих итерациях flexbox.
Flexbox был экспериментально реализован в нескольких веб-браузерах. В то время метод создания экспериментальных реализаций заключался в использовании префикса поставщика. Идея этих префиксов заключалась в том, чтобы позволить разработчикам браузеров и веб-разработчикам тестировать и исследовать реализации спецификации, не конфликтуя с другими реализациями.Идея заключалась не в использовании экспериментальных реализаций в производственном коде. Однако в конечном итоге префиксы использовались в производственном коде, и изменения в экспериментальной спецификации вынудили людей обновлять свои сайты, чтобы не отставать.
В 2009 году спецификация выглядела совсем иначе. Чтобы создать гибкий контейнер, вы должны использовать display: box , и было несколько свойств box- * , которые выполняли то, что вы сегодня узнаете из flexbox.
Было обновление спецификации, которое обновило синтаксис до отображения : flexbox — это снова было с префиксом поставщика.
В конечном итоге спецификация была обновлена, чтобы определить display: flex как способ создания гибкого контейнера. С этого момента браузер поддерживает последнюю версию спецификации.
Существует несколько старых статей, относящихся к более старым версиям flexbox, которые довольно легко идентифицировать из-за изменения способа создания гибкого контейнера. Если вы найдете что-то, относящееся к display: box или display: flexbox , это устаревшая информация.
Браузеры поддерживают flexbox превосходно, и большинству браузеров на данном этапе не нужен префикс. Safari был последним из основных браузеров, удалявших префиксы, с выпуском Safari 9 в 2015 году. Два браузера, о которых следует помнить для кросс-браузерной совместимости:
Internet Explorer 10, в котором реализована версия спецификации display: flexbox с префиксом -ms- .
UC Browser, который по-прежнему поддерживает версию 2009 display: box только с префиксом -webkit- .
Отметим также, что Internet Explorer 11 поддерживает современную спецификацию display: flex , однако в ней есть ряд ошибок в реализации.
Большинство проблем с flexbox связаны с изменениями спецификации по мере ее разработки и с тем фактом, что многие из нас пытались использовать экспериментальную спецификацию в производстве. Если вы пытаетесь обеспечить обратную совместимость со старыми версиями браузеров, в частности с IE10 и 11, сайт Flexbugs может оказаться полезным ресурсом.Вы увидите, что многие из перечисленных ошибок относятся к старым версиям браузеров и исправлены в текущих браузерах. Для каждой ошибки указан обходной путь, который может сэкономить вам много часов на размышления.
Если вы хотите включить очень старые браузеры с поддержкой flexbox, вы можете включить префиксы поставщиков в свой CSS в дополнение к версии без префиксов. Сегодня это становится все реже и реже, поскольку поддержка широко распространена.
.wrapper { дисплей: -webkit-box; дисплей: -webkit-flex; дисплей: -ms-flexbox; дисплей: гибкий; }
Autoprefixer Online — это полезный способ узнать, какие префиксы рекомендуются, в зависимости от того, на сколько версий вы хотите вернуться с поддержкой браузера.Вы также можете проверить, могу ли я использовать информацию о том, когда префиксы были удалены в браузерах, чтобы принять решение.
Учитывая, что использование flexbox инициируется значением свойства display , при необходимости поддержки очень старых браузеров, которые вообще не поддерживают flexbox, резервные варианты могут быть созданы путем перезаписи одного метода компоновки другим. Спецификация определяет, что происходит, если вы используете другие методы компоновки для элемента, который затем становится гибким элементом.
Плавающие позиции
“float и clear не создают плавающего или зазора гибкого элемента и не выводят его из потока.”- 3. Гибкие контейнеры
В следующем живом примере я разместил два блока, а затем установил display: flex на контейнере. Теперь элементы являются гибкими, что означает, что они растягиваются до одинаковой высоты. Никакое поведение с плавающей запятой не применяется.
Вы можете протестировать резервное поведение, удалив display: flex из оболочки.
display: inline-block
Как только элемент inline-block становится гибким элементом, он получает статус block , и поэтому поведение display: inline-block , такое как сохранение пробелов между элементами, больше не применяется.
Удалите display: flex , чтобы увидеть откат. Вы увидите, что между элементами добавлено пустое пространство, что происходит при использовании display: inline-block , поскольку он предпочитает пустое пространство, как и другие встроенные элементы.
display: table-
Свойства отображения таблицы CSS потенциально могут быть очень полезны в качестве запасного варианта, поскольку они позволяют использовать шаблоны проектирования, такие как столбцы в полную высоту и вертикальное центрирование, а также работать с Internet Explorer 8.
Если вы используете display: table-cell для элемента в вашем HTML, он принимает стиль ячейки таблицы HTML. CSS создает анонимные блоки для представления этих элементов, так что вам не нужно заключать каждый элемент в оболочку для представления строки таблицы HTML и вторую для представления самого элемента таблицы. Эти анонимные блоки нельзя видеть или стилизовать; они здесь только для того, чтобы починить дерево.
Если вы затем объявите display: flex для родительского элемента, эти анонимные поля не будут созданы, и поэтому ваш элемент останется прямым дочерним элементом и может стать гибким элементом, потеряв любую из функций отображения таблицы.
“Примечание. Некоторые значения display обычно вызывают создание анонимных блоков вокруг исходного блока. Если такой блок является гибким элементом, он сначала блокируется, и поэтому создание анонимного блока не произойдет. Например, два смежных гибких элемента с display: table-cell станут двумя отдельными гибкими элементами display: block вместо того, чтобы быть заключенными в одну анонимную таблицу ». — 4. Flex Items
Свойство vertical-align
Живой пример ниже демонстрирует использование свойства vertical-align вместе с display: inline-block .Оба display: table-cell и display: inline-block позволяют использовать это свойство. Использование vertical-align позволяет выравнивать по вертикали перед flexbox. Это свойство игнорируется flexbox, поэтому вы можете использовать его вместе с display: table-cell или display: inline-block в качестве запасного варианта, а затем безопасно использовать вместо этого свойства выравнивания поля в flexbox.
Вы можете использовать запросы функций для обнаружения поддержки flexbox:
@supports (дисплей: гибкий) { // код для поддержки браузеров }
Обратите внимание, что Internet Explorer 11 не поддерживает запросы функций, но поддерживает flexbox.Если вы решите, что реализация IE11 содержит слишком много ошибок, и вы хотите использовать его в качестве резервного макета, вы можете использовать запросы функций для обслуживания правил flexbox только для тех браузеров с хорошей поддержкой flexbox. Помните, что если вы хотите включить версии браузеров, в которых был установлен flexbox с префиксом поставщика, вам нужно будет включить версию с префиксом в свой запрос функции. Следующий запрос функции будет включать UC Browser, который поддерживает запросы функций и старый синтаксис flexbox с префиксом:
@supports (display: flex) или (display: -webkit-box) { // код для поддержки браузеров }
Для получения дополнительной информации об использовании Feature Queries см. Использование Feature Queries в CSS в блоге Mozilla Hacks.
Хотя я потратил некоторое время на изучение этого руководства, рассматривая потенциальные проблемы и отступления, flexbox очень хорошо готов для использования в производственной работе. Это руководство поможет вам в тех случаях, когда вы столкнетесь с проблемой или вам потребуется поддержка старых браузеров.
CSS свойство гибкости

Пример
Пусть все гибкие элементы будут одинаковой длины, независимо от их содержимого:
#main div {
-ms-flex: 1; / * IE 10 * /
flex: 1;
}
Попробуй сам »
Совет: Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Свойство flex является сокращенным свойством для:
Свойство flex устанавливает гибкую длину гибких элементов.
Примечание: Если элемент не является гибким, свойство flex не действует.
Значение по умолчанию: 0 1 авто
Унаследовано: №
Анимация: да, см. Отдельные свойства .Прочитать о animatable
Версия: CSS3
Синтаксис JavaScript: объект .style.flex = «1» Попытайся
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Числа, за которыми следуют -webkit-, -ms- или -moz- указывают первую версию, которая работала с префиксом.
Недвижимость
гибкий 29.0
21.0 -webkit- 11,0
10,0 -мс- 28,0
18,0 -моз- 9,0
6,1 -вебкит- 17,0
Синтаксис CSS
flex: flex-grow flex-shrink гибкая основа | авто | начальный | наследование;
Значения свойств
Значение Описание
гибкий рост Число, определяющее, насколько элемент будет расти относительно остальных гибких элементов
гибкая усадка Число, определяющее степень усадки элемента по сравнению с остальными гибкими элементами
гибкая основа Длина предмета.Допустимые значения: «авто», «наследование» или число, за которым следует «%», «px», «em» или любая другая единица длины
авто То же, что и 1 1 авто.
начальный То же, что 0 1 авто. Читать про начальные
нет То же, что 0 0 авто.
унаследовать Наследует это свойство от своего родительского элемента. Читать о наследовать
Другие примеры
Пример
Использование flex вместе с медиа-запросами для создания другого макета для разных размеров экрана / устройств:
.гибкий контейнер {
дисплей: гибкий;
flex-wrap: пленка;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
гибкость: 50%;
}
/ * Адаптивный макет — делает макет с одним столбцом (100%) вместо макета с двумя столбцами макет (50%) * /
@media (max-width: 800px) {
.flex-item-right, .flex-item-left {
гибкость: 100%;
}
}
Попробуй сам »
связанные страницы
Учебное пособие по CSS: CSS Flexible Box
Ссылка CSS: свойство flex-basic
Ссылка CSS: свойство flex-direction
Ссылка CSS: свойство flex-flow
Ссылка CSS: свойство flex-grow
Ссылка CSS: свойство flex-shrink
Ссылка CSS: свойство flex-wrap
Ссылка на HTML DOM: свойство flex

Кроссбраузерная поддержка CSS Flexbox
Модель
CSS Flexbox оптимизирована для дизайна пользовательского интерфейса.Он разработан в первую очередь, чтобы избежать переполнения родительского элемента. Он будет сжимать дочерние элементы, когда размер элемента-предка ограничен. Он заполнит пространство за счет увеличения размера дочернего элемента при увеличении размера родительского элемента. Поведение гибкого контейнера при сжатии и расширении может нарушаться из-за свойств минимальной и максимальной ширины / высоты.
CSS FlexBox версии по версии
W3 2009: дисплей: коробка;
начало выравнивания коробки | конец | центр | исходный уровень | протяжение нормальное направление коробки | обратный | наследовать box-flex <число> 0.0 box-flex-group <целое число> 1 коробчатые одинарные | несколько box-ordinal-group <целое число> 1 визуал коробка-ориентировать по горизонтали | вертикальный | линейная ось | блок-ось | наследовать элементы прямоугольника со встроенной осью без визуального элемента начало коробки | конец | центр | оправдывать
W3 2011: дисплей flexbox | встроенный Flexbox
гибкое выравнивание авто | базовый автоматический гибкое направление lr | rl | tb | bt | встроенный | инлайн-реверс | блок | блочно-обратные флексбоксы no lr | rl | tb | bt flex-order <целое число> 1 начало гибкой упаковки | конец | центр | оправдывать
W3 2012: шлейф дисплея | встроенный гибкий
align-content гибкий старт | гибкий конец | центр | пространство между | космическое пространство | протяжение align-items flex-start | гибкий конец | центр | исходный уровень | протяжение автоматическое выравнивание | гибкий старт | гибкий конец | центр | исходный уровень | протяжение ряд в гибком направлении | ряд-обратный | столбец | столбец-обратный flex-flow <'flex-direction'> || <'гибкая пленка'> flex-grow <число> ‘0’ flex-shrink <число> «1» гибкая пленка nowrap | упаковка | обертка-реверс justify-content flex-start | гибкий конец | центр | пространство между | пространство вокруг заказ <номер> 0
css — Выровнять flexbox с flex-direction: column to vertical center
css — Выровнять flexbox с flex-direction: column к вертикальному центру — qaru
Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.
Спросил 2 года, 4 месяца назад
Просмотрено 616 раз
На этот вопрос уже есть ответы :
Закрыт 2 года назад.
Как выровнять элементы по центру вертикали?
Я использую как flex-direction: column; и align-items: по центру; .
.box { граница: сплошной красный 1px; ширина: 100%; высота: 180 пикселей; дисплей: -webkit-box; дисплей: -ms-flexbox; дисплей: гибкий; -webkit-box-orient: вертикальный; -webkit-box-direction: нормальный; -ms-flex-direction: столбец; flex-direction: столбец; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .пункт{ ширина: 20%; граница: сплошной зеленый 1px; }
1 2 3 4 5
Создан 19 мар.
Феликс А. Дж. Феликс А. Дж.
5,85222 золотых знака2323 серебряных знака3838 бронзовых знаков
1
Надеюсь, это сработает для вас!
.коробка{ граница: сплошной красный 1px; ширина: 100%; высота: 300 пикселей; дисплей: -webkit-box; дисплей: -ms-flexbox; дисплей: гибкий; / * -webkit-box-orient: vertical; * / -webkit-box-direction: нормальный; -ms-flex-direction: столбец; flex-direction: столбец; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; } .пункт{ ширина: 20%; граница: сплошной зеленый 1px; }
1 2 3 4 5
Создан 19 мар.
Асия ФатимаАзия Фатима
1,9239 золотых знаков77 серебряных знаков2020 бронзовых знаков
1
Добавьте justify-content: center; С по .ящик
.box { граница: сплошной красный 1px; ширина: 100%; высота: 180 пикселей; дисплей: -webkit-box; дисплей: -ms-flexbox; дисплей: гибкий; -webkit-box-orient: вертикальный; -webkit-box-direction: нормальный; -ms-flex-direction: столбец; flex-direction: столбец; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; } .пункт{ ширина: 20%; граница: сплошной зеленый 1px; }
1 2 3 4 5
Создан 19 мар.
Джибин Джозеф
1,13744 серебряных знака1212 бронзовых знаков
Добавление
justify-content: center
в.коробка должна быть в порядке.

Создан 19 мар.
Хуань Фэнхуань Фэн
5,43011 золотых знаков2222 серебряных знака4141 бронзовый знак
Не тот ответ, который вы ищете? Посмотрите другие вопросы с метками css flexbox или задайте свой вопрос.
по умолчанию
Stack Overflow лучше всего работает с включенным JavaScript
Ваша конфиденциальность
Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Принимать все файлы cookie Настроить параметры
Обзор всех свойств Flexbox
14.3Все свойства Flexbox вкратце
В этом разделе кратко описаны все свойства, которые вы можете использовать для «точной настройки» flexbox, а также варианты, зависящие от производителя, которые возникли в результате различные стадии разработки гибкого модуля.
Обратите внимание, что вы не можете использовать свойства float , clear и vertical-align в flexbox.
14.3.1 Свойства контейнеров
дисплей: flex
Это наиболее важное свойство flexbox. Он определяет контейнер как базовый гибкий бокс и распределяет содержащиеся в нем элементы в соответствии с настройками гибкой модели по умолчанию.
.container { дисплей: -ms-flexbox; дисплей: -moz-box; дисплей: -webkit-box; дисплей: -webkit-flex; дисплей: гибкий; }
justify-content
Задает горизонтальное выравнивание для содержащихся элементов.
гибкая пленка
По умолчанию flexbox пытается сжать все содержащиеся в нем элементы в одну строку. Вы можете изменить это поведение, используя wrap , чтобы выровнять строки по левому краю, или wrap-reverse , чтобы расположить строки так, чтобы они были выровнены по правому краю:
гибкое направление
Определяет порядок ящиков в контейнере. У вас есть возможность изменить горизонтальный порядок по умолчанию ( рядов-обратный ) или укладывать боксы вертикально ( столбец и столбец-обратный ).Эта последняя опция «поворачивает» обе оси выравнивания гибкого блока на 90 °, т.е. е. свойства justify-content и align-content теперь будут вести себя противоположным образом!
align-content
Это свойство определяет вертикальное распределение ящиков в многорядных гибких макетах. Конечно, этот эффект виден только в том случае, если высота контейнера больше, чем высота его ящиков.
align-items
Определяет вертикальное расположение элементов разной высоты. baseline основывает расположение на базовой линии содержащегося текста.
14.3.2 Свойства содержащихся элементов
гибкая основа
Определяет предпочтительную ширину элемента. Если элемент не помещается в контейнер, его можно уменьшить в размере. Значение по умолчанию — авто , т.е. е. ширина элемента зависит от его содержимого.
.element { -ms-flex-предпочтительный размер: <спецификация ширины>; -webkit-flex-base: <спецификация ширины>; гибкая основа: <спецификация ширины>; }
гибкий рост
Это свойство указывает, следует ли при необходимости увеличивать размер гибкого элемента.Значение, присвоенное этому свойству, представляет собой число, определяющее долю доступного пространства в контейнере, которую должен занимать элемент. Например, если вы назначите flex-grow: 1 всем элементам, они будут распределены поровну, т.е. е. все они будут иметь одинаковую ширину (верхний ряд на рисунке). Если одному из элементов присвоено значение 2, он будет занимать вдвое больше места, т.е. он будет вдвое шире других элементов (нижняя строка на рисунке).
Значение по умолчанию — 0, т.е.е. ширина каждого элемента зависит от его индивидуального содержания.
.element { -ms-flex-positive: <число>; -moz-box-flex: <число>; -webkit-box-flex: <номер>; -webkit-flex-grow: <число>; гибкий рост: <число>; }
гибкая термоусадочная
Это свойство позволяет указать, можно ли при необходимости уменьшить размер элемента. Значение по умолчанию — 1. Чем выше значение, тем выше будет коэффициент уменьшения. flex-shrink: 0 не уменьшает размер элемента.
.element { -ms-flex-negative: <число>; -webkit-flex-shrink: <номер>; flex-shrink: <число>; }
align-self
Это свойство позволяет вам переопределить вертикальное выравнивание, определенное в align-items для отдельных боксов.
Обратите внимание, что в системах записи, которые читают справа налево, все соответствующие свойства будут вести себя наоборот. Например, justify-content: flex-start будет выровнять элементы в латинских системах письма так, чтобы они были выровнены по левому краю, но будут выровняйте их по правому краю в арабской или еврейской письменности!
кроссбраузерных проблем с Flexbox — fastfwd
Когда миру был представлен Flexbox, фронтенд-разработчики все еще сдерживали свое волнение.Новый стандарт компоновки для Интернета стал фактом, но как насчет старых браузеров? Это была одна из причин, по которой разработчики использовали flexbox с большой долей неопределенности.
Сегодня мы знаем больше и можем делать больше!
Что такое Flexbox?
Элемент
Flexbox (или Flexible Box) может перераспределять своих дочерних элементов, изменяя их ширину и высоту наилучшим образом. Он также может изменять порядок элементов без изменения разметки.
Почему flexbox лучше плавающих элементов?
При использовании flexbox ваша разметка чистая, и вам не нужно добавлять какие-либо дополнительные узлы.Принимая во внимание, что при использовании float вы всегда должны помнить об очистке float, чтобы страница не ломалась. Это означает добавление еще одного div или псевдоэлементов. Более того, у вас должна быть точная ширина хотя бы одного элемента, чтобы все они поместились в ряд. Это небезопасно, особенно при использовании подхода, ориентированного на мобильные устройства.
Проблемы с кроссбраузерностью
При использовании flexbox наша основная проблема — IE. К сожалению, IE старше IE10 вообще не поддерживает flexbox.
источник: caniuse.com
К счастью, есть префиксы, которые позволяют нам контролировать поведение старых браузеров. Нельзя забывать о порядке префиксов и доверять мне — это одна из самых распространенных ошибок при работе с префиксами в CSS. Правило состоит в том, чтобы использовать старый синтаксис перед новым, поэтому, если браузер понимает новые параметры, следует использовать их.
Наиболее частые проблемы со старыми браузерами
Значения по умолчанию
В IE10 значение по умолчанию для flex — 0 0 авто, а не 0 1 авто, как определено в последней спецификации.Всегда лучше добавлять flex: 0 1 auto ко всем дочерним элементам flex, даже если мы не меняем значения по умолчанию.
Мин. Высота и высота
Safari и IE имеют некоторые проблемы с вычислением размера гибких элементов при использовании min-height. Кроме того, я заметил некоторые проблемы с установкой высоты: 100% для элемента внутри дочернего элемента flex. Добавление display: flex к дочернему элементу flex устранило проблему.
justify-content: равномерно
Последняя добавленная функция justify-content позволяет равномерно распределять элементы.Дети имеют равное пространство вокруг себя. К сожалению, это очень полезное распределенное выравнивание поддерживается только в браузере Firefox.
Базовый шлейф
При использовании гибкости мы можем использовать некоторые настройки, чтобы сделать контейнер и его дочерние элементы еще более гибкими.
HTML:
<раздел> Пункт 1 Пункт 2 Пункт 3 Пункт 4 Пункт 5
SCSS:
.basic-flex { дисплей: гибкий; &> * { гибкость: 1 0 авто; дисплей: гибкий; justify-content: center; align-items: center; } }
В приведенном выше коде я использую display: flex для родительского элемента, а для дочерних элементов я объединил flexbox с некоторыми дополнительными настройками. Здесь происходит то, что div .basic-flex равномерно перераспределяет своих дочерних элементов, но также каждый дочерний элемент помещает текст точно посередине, не только по горизонтали, но и по вертикали.Конечно, мы могли бы использовать простой line-height , но тогда нам нужны точные значения.
Кроссбраузерные варианты гибкости
Лучший подход — попытаться работать с самым старым из возможных браузеров. Если вы уже добавляете префиксы, вы можете легко добавить их все, чтобы убедиться, что ваш код css защищен от ошибок.
Конечно, было бы проще, если бы кроссбраузерные префиксы были ТОЛЬКО префиксами. На самом деле у нас есть много разных вариантов.
Вот все возможные варианты гибкости с важными префиксами.
дисплей: гибкий
дисплей: -webkit-box; дисплей: -webkit-flex; дисплей: -ms-flexbox; дисплей: гибкий;
flex-direction: ряд;
-webkit-box-orient: горизонтально; -webkit-box-direction: нормальный; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: ряд;
flex-wrap: пленка;
-webkit-flex-wrap: обертка; -ms-flex-wrap: обертка; flex-wrap: обертка;
flex-flow: обертывание строк;
-webkit-box-orient: горизонтально; -webkit-box-direction: нормальный; -webkit-flex-flow: перенос строк; -ms-flex-flow: перенос строк; flex-flow: перенос строк;
justify-content: пробел между ними;
-webkit-box-pack: обосновать; -webkit-justify-content: пробел между; -ms-flex-pack: обосновать; justify-content: пробел между;
align-items: center;
-webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
align-content: center;
-webkit-align-content: center; -ms-flex-line-pack: по центру; выровнять контент: центр;
flex: 1 0 авто;
-webkit-box-flex: 1; -webkit-flex: 1 0 авто; -ms-flex: 1 0 авто; гибкость: 1 0 авто;
flex-grow: 1;
-webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1;
гибкая усадка: 0;
-webkit-flex-shrink: 0; -ms-flex-negative: 0; гибкость-усадка: 0;
флекс-основа: авто;
-webkit-flex-base: авто; -ms-flex-предпочтительный размер: авто; флекс-основа: авто;
заказ: 1;
-webkit-box-порядковая-группа: 2; -webkit-order: 1; -ms-flex-order: 1; заказ: 1;
align-self: гибкий конец;
-webkit-align-self: гибкий конец; -ms-flex-item-align: конец; align-self: гибкий конец;
Про все приставки никто не помнит!
Иногда сложно запомнить все возможные префиксы.Вот почему я всегда стараюсь упростить и ускорить весь процесс. В повседневной жизни я работаю с GULP. Он конвертирует мои файлы scss и добавляет префиксы на лету.
Если вы не пользуетесь какими-либо инструментами, вы всегда можете попробовать онлайн-генераторы. Мне больше всего нравится онлайн-версия Autoprefixer CSS.
Зная все распространенные префиксы, я могу переписать свой предыдущий код:
.basic-flex { дисплей: -webkit-box; дисплей: -webkit-flex; дисплей: -ms-flexbox; дисплей: гибкий; &> * { -webkit-box-flex: 1; -webkit-flex: 1 0 авто; -ms-flex: 1 0 авто; гибкость: 1 0 авто; дисплей: -webkit-box; дисплей: -webkit-flex; дисплей: -ms-flexbox; дисплей: гибкий; -webkit-box-pack: по центру; -webkit-justify-content: center; -ms-flex-pack: по центру; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } }
Привет, начальный загрузчик 4
Узнать больше о flexbox необходимо, если мы хотим работать с новым Bootstrap 4.Bootstrap был полностью переписан, и он использует flexbox в качестве основы для своей сетки. Добро пожаловать в будущее фронтенда!
Получайте удовольствие от тестирования браузера и исправления всех кроссбраузерных проблем! Если вы хотите, чтобы это было сделано за вас без особых усилий — мы здесь для вас!
Flex · Bootstrap v5.0
Включить гибкое поведение
Примените утилиты display для создания контейнера flexbox и преобразования прямых дочерних элементов в гибкие элементы.Гибкие контейнеры и элементы можно дополнительно модифицировать с помощью дополнительных свойств гибкости.
Я контейнер flexbox!
Я встроенный контейнер Flexbox!
Я встроенный контейнер flexbox!
Варианты ответа
также существуют для .d-flex и .d-inline-flex .
.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
.d-xxl-flex
.d-xxl-inline-flex
Направление
Установите направление гибких элементов в гибком контейнере с помощью утилит направления.В большинстве случаев вы можете опустить горизонтальный класс здесь, так как браузер по умолчанию , строка . Однако вы можете столкнуться с ситуациями, когда вам нужно явно установить это значение (например, адаптивные макеты).
Используйте .flex-row , чтобы задать горизонтальное направление (по умолчанию в браузере), или .flex-row-reverse , чтобы начать горизонтальное направление с противоположной стороны.
Гибкий элемент 1
Гибкий элемент 2
Элемент гибкости 3
Гибкий элемент 1
Гибкий элемент 2
Элемент гибкости 3
Элемент Flex 1 Элемент Flex 2 Элемент Flex 3 Элемент Flex 1 Элемент Flex 2 Элемент Flex 3
Используйте .flex-column , чтобы задать вертикальное направление, или .flex-column-reverse , чтобы начать вертикальное направление с противоположной стороны.
Гибкий элемент 1
Гибкий элемент 2
Элемент гибкости 3
Гибкий элемент 1
Гибкий элемент 2
Элемент гибкости 3
Элемент Flex 1 Элемент Flex 2 Элемент Flex 3 Элемент Flex 1 Элемент Flex 2 Элемент Flex 3
Адаптивные варианты также существуют для flex-direction .
.flex-ряд
.flex-row-reverse
. Гибкая колонка
.flex-колонка-реверс
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-колонка
.flex-sm-колонка-реверс
.flex-md-ряд
.flex-md-row-обратный
.flex-md-колонка
.Flex-MD-столбец-обратный
.flex-LG-ряд
.flex-lg-row-обратный
.flex-lg-колонка
.flex-lg-колонка-реверс
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-колонка
.flex-xl-колонка-реверс
.flex-xxl-row
.flex-xxl-row-reverse
.flex-xxl-столбец
.flex-xxl-обратная колонка
Обоснование содержания
Используйте утилиты justify-content в контейнерах flexbox, чтобы изменить выравнивание гибких элементов по главной оси (ось x для начала, ось y, если flex-direction: column ). Выберите начало (браузер по умолчанию), конец , центр , между , около или равномерно .
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
... ... ... ... ... ...
Варианты ответа также существуют для justify-content .
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-между
.justify-content-around
.равномерно-контент-равномерно
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-между
.justify-content-sm-around
.justify-content-sm-evenly
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-между
.justify-content-md-around
.justify-content-md-равномерно
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-между
.justify-content-lg-about
.justify-content-lg-evenly
.justify-content-xl-start
.justify-content-XL-конец
.justify-content-xl-center
.justify-content-xl-между
.justify-content-xl-around
.justify-content-xl-evenly
.justify-content-xxl-start
.justify-content-xxl-end
.justify-content-xxl-center
.justify-content-xxl-между
.justify-content-xxl-around
.justify-content-xxl-равномерно
Выровнять элементы
Используйте утилиты align-items в контейнерах flexbox, чтобы изменить выравнивание гибких элементов по поперечной оси (ось Y для начала, ось X, если flex-direction: column ). Выберите начало , конец , центр , базовое значение или растяжение (браузер по умолчанию).
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
... ... ... ... ...
Адаптивные варианты также существуют для align-items .
.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.выровнять элементы-sm-конец
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.выровнять элементы-LG-конец
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
.align-items-xxl-start
.выровнять элементы-XXL-конец
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-stretch
Самовыравнивание
Используйте утилиты align-self для элементов Flexbox, чтобы индивидуально изменить их выравнивание по поперечной оси (ось Y для начала, ось X, если flex-direction: column ). Выберите один из тех же параметров, что и align-items : начало , конец , центр , базовая линия или stretch (браузер по умолчанию).
Гибкий элемент
Выровненный гибкий элемент
Гибкий элемент
Гибкий элемент
Выровненный гибкий элемент
Гибкий элемент
Гибкий элемент
Выровненный гибкий элемент
Гибкий элемент
Гибкий элемент
Выровненный гибкий элемент
Гибкий элемент
Гибкий элемент
Выровненный гибкий элемент
Гибкий элемент
Выровненный гибкий элемент Выровненный гибкий элемент Выровненный гибкий элемент Выровненный гибкий элемент Выровненный гибкий элемент
Адаптивные варианты также существуют для align-self .
.align-самозапуск
.align-self-end
.align-self-center
.align-self-baseline
. Выравнивание-саморастягивание
.align-self-sm-start
.align-self-sm-end
.align-self-sm-центр
.align-self-sm-baseline
.align-self-sm-stretch
.выровнять-само-MD-старт
.align-self-md-конец
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-конец
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.выровняйте-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-baseline
.align-self-xxl-stretch
Заливка
Используйте класс .flex-fill для серии элементов-братьев, чтобы придать им ширину, равную их содержимому (или равную ширину, если их содержимое не превышает их границы), занимая все доступное горизонтальное пространство.
Flex элемент с большим количеством контента
Гибкий элемент
Гибкий элемент
Гибкий элемент с большим количеством контента Элемент Flex Элемент Flex
Адаптивные варианты также существуют для flex-fill .
.flex-fill
.flex-sm-fill
.flex-md-fill
.Flex-LG-заполнение
.flex-xl-fill
.flex-xxl-fill
Расти и сжимайся
Используйте утилиты .flex-grow- * для переключения способности гибкого элемента увеличиваться, чтобы заполнить доступное пространство. В приведенном ниже примере элементы .flex-grow-1 используют все доступное пространство, в то время как оставшимся двум гибким элементам предоставляется необходимое пространство.
Гибкий элемент
Гибкий элемент
Третий элемент гибкости
Элемент Flex Элемент Flex Третий гибкий элемент
Используйте .flex-shrink- * для переключения способности гибкого элемента сжиматься при необходимости. В приведенном ниже примере второй гибкий элемент с .flex-shrink-1 принудительно переносит свое содержимое в новую строку, «сжимаясь», чтобы освободить больше места для предыдущего гибкого элемента с .w-100 .
Элемент Flex Элемент Flex
Адаптивные варианты также существуют для flex-grow и flex-shrink .
.flex- {grow | shrink} -0
.flex- {grow | shrink} -1
.flex-sm- {grow | shrink} -0
.flex-sm- {grow | shrink} -1
.flex-md- {grow | shrink} -0
.flex-md- {grow | shrink} -1
.flex-lg- {grow | shrink} -0
.flex-lg- {grow | shrink} -1
.flex-xl- {grow | shrink} -0
.flex-xl- {grow | shrink} -1
.flex-xxl- {grow | shrink} -0
.flex-xxl- {grow | shrink} -1
Автоматические поля
Flexbox может делать довольно удивительные вещи, когда вы смешиваете выравнивание гибкости с автоматическими полями. Ниже показаны три примера управления гибкими элементами через автоматические поля: по умолчанию (без автоматического поля), перемещение двух элементов вправо ( .me-auto ) и перемещение двух элементов влево ( .ms-auto ) .
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Элемент Flex Элемент Flex Элемент Flex Элемент Flex Элемент Flex Элемент Flex Элемент Flex Элемент Flex Элемент Flex
С элементами выравнивания
Вертикально переместите один гибкий элемент вверх или вниз контейнера, смешав align-items , flex-direction: column и margin-top: auto или margin-bottom: auto .
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Элемент Flex Элемент Flex Элемент Flex Элемент Flex Элемент Flex Элемент Flex
Обертка
Измените способ переноса гибких элементов в гибкий контейнер.Выберите вариант без упаковки (по умолчанию в браузере) с .flex-nowrap , с .flex-wrap или с обратным обертыванием с .flex-wrap-reverse .
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
...
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
...
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
...
Адаптивные варианты также существуют для flex-wrap .
.flex-nowrap
. Гибкая пленка
.flex-wrap-реверс
.flex-sm-nowrap
.flex-sm-пленка
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-реверс
.flex-lg-nowrap
.flex-LG-пленка
.flex-lg-wrap-обратный
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-wrap-reverse
Заказать
Измените порядок определенных гибких элементов visual с помощью нескольких утилит order . Мы предоставляем только варианты создания элемента первым или последним, а также сброс для использования порядка DOM.Поскольку заказ принимает любое целое значение от 0 до 5, добавьте собственный CSS для любых дополнительных значений.
Первый элемент гибкости
Второй гибкий элемент
Третий элемент гибкости
Первый гибкий элемент Второй гибкий элемент Третий гибкий элемент
Адаптивные варианты также существуют для заказа .
. Заказ-0
.заказ-1
. Заказ-2
. Заказ-3
. Заказ-4
. Заказ-5
.order-sm-0
. Заказ-см-1
. Заказ-см-2
. Заказ-см-3
. Заказ-см-4
. Заказ-см-5
.order-md-0
.order-md-1
.заказ-md-2
.order-md-3
.order-md-4
.order-md-5
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-xl-0
.order-xl-1
.order-xl-2
.заказ-XL-3
.order-XL-4
.order-XL-5
.order-xxl-0
.order-xxl-1
.order-xxl-2
.order-xxl-3
.order-xxl-4
.order-xxl-5
Кроме того, существуют также адаптивные классы .order-first и .order-last , которые изменяют order элемента, применяя order: -1 и order: 6 соответственно.
. Первый заказ
. Последний заказ
.order-sm-first
.order-sm-last
.order-md-first
.order-md-last
.order-lg-first
.order-lg-last
.order-xl-first
.order-xl-last
.order-xxl-first
.заказ-XXL-последний
Выровнять содержимое
Используйте утилиты align-content на контейнерах flexbox для выравнивания гибких элементов вместе на поперечной оси. Выберите из начало (браузер по умолчанию), конец , центр , между , около или растяжение . Чтобы продемонстрировать эти утилиты, мы ввели flex-wrap: wrap и увеличили количество гибких элементов.
Внимание! Это свойство не влияет на отдельные строки гибких элементов.
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
...
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
...
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
...
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
...
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
...
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
...
Адаптивные варианты также существуют для align-content .
.align-content-start
.align-content-end
.align-контент-центр
.align-content-около
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.выровнять контент-sm-около
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-около
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.выровнять контент-LG-около
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-around
.align-content-xl-stretch
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.выровнять контент-XXL-вокруг
.align-content-xxl-stretch
Хотите реплицировать компонент мультимедийного объекта из Bootstrap 4? В мгновение ока воссоздайте его с помощью нескольких гибких утилит, которые обеспечивают еще большую гибкость и настройку, чем раньше.
PlaceholderImage
Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать.
Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать.
Допустим, вы хотите центрировать контент по вертикали рядом с изображением:
PlaceholderImage
Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать.
Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать.
Sass
Утилиты API
Утилиты
Flexbox объявлены в нашем API утилит в scss / _utilities.scss . Узнайте, как использовать API утилит.
"гибкость": ( отзывчивый: правда, свойство: flex, значения: (заполнить: 1 1 авто) ), "flex-direction": ( отзывчивый: правда, свойство: flex-direction, класс: гибкий, значения: строка столбец строка-обратный столбец-обратный ), "гибкий рост": ( отзывчивый: правда, свойство: flex-grow, класс: гибкий, значения: ( расти-0: 0, расти-1: 1, ) ), "флекс-термоусадка": ( отзывчивый: правда, свойство: гибкость-усадка, класс: гибкий, значения: ( усадка-0: 0, усадка-1: 1, ) ), "гибкая пленка": ( отзывчивый: правда, свойство: flex-wrap, класс: гибкий, значения: wrap nowrap wrap-reverse ), "зазор": ( отзывчивый: правда, свойство: разрыв, класс: разрыв, значения: $ spacers ), "justify-content": ( отзывчивый: правда, свойство: justify-content, значения: ( начало: гибкий старт, конец: гибкий конец, центр: центр, между: пробел-между, вокруг: пространство вокруг, равномерно: равномерно, ) ), "align-items": ( отзывчивый: правда, свойство: align-items, значения: ( начало: гибкий старт, конец: гибкий конец, center: центр, исходный уровень: исходный уровень, растянуть: растянуть, ) ), "align-content": ( отзывчивый: правда, свойство: align-content, значения: ( начало: гибкий старт, конец: гибкий конец, центр: центр, между: пробел-между, вокруг: пространство вокруг, растянуть: растянуть, ) ), "align-self": ( отзывчивый: правда, свойство: align-self, значения: ( авто: авто, начало: гибкий старт, конец: гибкий конец, center: центр, исходный уровень: исходный уровень, растянуть: растянуть, ) ), "заказывать": ( отзывчивый: правда, свойство: заказ, значения: ( первый: -1, 0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, последний: 6, ), ),
.

Значение по умолчанию:	0 1 авто
Унаследовано:	№
Анимация:	да, см. Отдельные свойства .Прочитать о animatable
Версия:	CSS3
Синтаксис JavaScript:	объект .style.flex = «1» Попытайся

Значение	Описание
гибкий рост	Число, определяющее, насколько элемент будет расти относительно остальных гибких элементов
гибкая усадка	Число, определяющее степень усадки элемента по сравнению с остальными гибкими элементами
гибкая основа	Длина предмета.Допустимые значения: «авто», «наследование» или число, за которым следует «%», «px», «em» или любая другая единица длины
авто	То же, что и 1 1 авто.
начальный	То же, что 0 1 авто. Читать про начальные
нет	То же, что 0 0 авто.
унаследовать	Наследует это свойство от своего родительского элемента. Читать о наследовать

Flexbox ms: Полное руководство по Flexbox | Frontender Magazine

Префиксы для flexbox CSS (кросбраузерный flexbox) — Блого-дарю

CSS3 flexbox — описание всех свойств модуля, примеры верстки

Что такое 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.2.1. Align-items

6.2.2. Align-self

6.3. Выравнивание строк flex-контейнера: align-content

Обратная совместимость Flexbox — CSS

Floated items

display: inline-block

display: table-

The vertical-align property

flex — CSS | MDN

Значения

Формальный синтаксис

Результат

Почему display: — ms-flex; -ms-justify-content: center; не работает в IE10?

2 ответа

CSS

Похожие вопросы:

Flexbox, теперь понятно — Пепелсбей.net

Flexbox, теперь понятно

Flexbox

68,51%

Первая система раскладки, которая не хак

prozrachniy.gif

<br clear=all>

Flexbox

Flexbox 09

Flexbox 09

Flexbox 11

Flexbox 12

Flexbox 12

Собственно

Оси

Привычный CSS

Главная

Поперечная

Пушкин. Зимний вечер

Пушкин. Зимний вечер

Пушкин. Зимний вечер

Пушкин. Зимний вечер

Включаем Flexbox

Меняем направление по оси

Поворачиваем саму ось

Меняем направление по оси

Што?

Вдоль

Вдоль направо

Вдоль посередине

Вдоль равномерно

Вдоль красиво

Перестановка

Меняем порядок

Меняем порядок

Меняем порядок

Поперёк

Даём высоту

Поперёк внизу

Поперёк посередине

Поперёк индивидуально

Центрирование

Растягивание