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 , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *