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

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

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

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

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

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

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

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

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

Я пытаюсь построить сетку ссылок на кнопки размером 3 на 3 flexbox, которая будет реагировать. Сетка отлично смотрится на рабочем столе и планшете, однако в мобильной версии элементы выровнены по…

В моем проекте у меня есть progressbar, и он отлично работает во всех браузерах, кроме IE11 (<11 я не поддерживаю). Во всех браузерах это выглядит так: А в IE11 это выглядит так: я не знаю,…

наглядное введение в систему компоновки элементов на веб-странице

CSS Flexbox — это технология для создания сложных гибких макетов за счёт правильного размещения элементов на странице. О самой технологии пишут здесь. Мы же решили объяснить возможности CSS Flexbox с использованием гифок.

Примечание Вы читаете улучшенную версию некогда выпущенной нами статьи.

1

display: flex

Есть страница:

На ней размещено 4 div разных размеров, которые находятся внутри серого div. У каждого div есть свойство display: block. Поэтому каждый блок занимает всю ширину строки. Чтобы начать работать с CSS Flexbox, нужно сделать контейнер flex-контейнером. Делается это так:

#container {
  display: flex;
}

Так у блоков появилось свойство flex-контекст, которое в дальнейшем позволит ими управлять гораздо проще, чем с использованием стандартного CSS.

2

flex-direction

У flex-контейнера есть две оси: главная и перпендикулярная ей.

По умолчанию все предметы располагаются вдоль главной оси — слева направо. Именно поэтому блоки в предыдущем примере выстроились в линию, когда мы применили display: flex. А вот flex-direction позволяет вращать главную ось.

#container {
  display: flex;
  flex-direction: column;
}

Обратите внимание, что flex-direction: column не выравнивает блоки по оси, перпендикулярной главной. Главная ось сама меняет своё расположение, и теперь направлена сверху вниз.

Есть ещё парочка свойств для flex-direction: row-reverse и column-reverse.

3

justify-content

Отвечает за выравнивание элементов по главной оси:

#container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

Justify-content может принимать 5 значений:

1. flex-start
2. flex-end
3. center
4. space-between
5. space-around

Space-between задаёт одинаковое расстояние между блоками, но не между контейнером и блоками. Space-around также задаёт одинаковое расстояние между блоками, но теперь расстояние между контейнером и блоками равно половине расстояния между блоками.

4

align-items

Если justify-content работает с главной осью, то align-items работает с осью, перпендикулярной главной оси. Вернёмся к flex-direction: row и пройдёмся по командам align-items:

1. flex-start
2. flex-end
3. center
4. stretch
5. baseline

Стоит заметить, что для align-items: stretch высота блоков должна быть равна auto. Для align-items: baseline теги параграфа убирать не нужно, иначе получится так:

Чтобы получше разобраться в том, как работают оси, объединим justify-content с align-items и посмотрим, как работает выравнивание по центру для двух свойств flex-direction:

5

align-self

Позволяет выравнивать элементы по отдельности:

#container {
  align-items: flex-start;
}
. square#one {
  align-self: center;
}
// Only this square will be centered.

Для двух блоков применим align-self, а для остальных — align-items: center и flex-direction: row.

6

flex-basis

Отвечает за изначальный размер элементов до того, как они будут изменены другими свойствами CSS Flexbox:

flex-basis влияет на размер элементов вдоль главной оси. Давайте посмотрим, что случится, если мы изменим направление главной оси:

Заметьте, что нам пришлось изменить и высоту элементов: flex-basis может определять как высоту элементов, так и их ширину в зависимости от направления оси.

7

flex-grow

Это свойство немного сложнее. Для начала зададим блокам одинаковую ширину в 120px:

По умолчанию значение flex-grow равно 0. Это значит, что блокам запрещено увеличиваться в размерах. Зададим flex-grow равным 1 для каждого блока:

Теперь блоки заняли оставшееся место в контейнере. Но что значит flex-grow: 1? Попробуем сделать flex-grow равным 999:

И… ничего не произошло. Так получилось из-за того, что flex-grow принимает не абсолютные значения, а относительные. Это значит, что не важно, какое значение у flex-grow, важно, какое оно по отношению к другим блокам:

Вначале flex-grow каждого блока равен 1, в сумме получится 6. Значит, наш контейнер разделён на 6 частей. Каждый блок будет занимать 1/6 часть доступного пространства в контейнере. Когда flex-grow третьего блока становится равным 2, контейнер делится на 7 частей: 1 + 1 + 2 + 1 + 1 + 1. Теперь третий блок занимает 2/7 пространства, остальные — по 1/7. И так далее.

flex-grow работает только для главной оси, пока мы не изменим её направление.

8

flex-shrink

Прямая противоположность flex-grow. Определяет, насколько блоку можно уменьшиться в размере. flex-shrink используется, когда элементы не вмещаются в контейнер. Вы определяете, какие элементы должны уменьшиться в размерах, а какие — нет. По умолчанию значение flex-shrink для каждого блока равно 1. Это значит, что блоки будут сжиматься, когда контейнер будет уменьшаться.

Зададим flex-grow и flex-shrink равными 1:

Теперь поменяем значение flex-shrink для третьего блока на 0. Ему запретили сжиматься, поэтому его ширина останется равной 120px:

flex-shrink основывается на пропорциях. То есть, если у первого блока flex-shrink равен 6, а у остальных он равен 2, то, это значит, что первый блок будет сжиматься в три раза быстрее, чем остальные.

9

flex

Заменяет flex-grow, flex-shrink и flex-basis. Значения по умолчанию: 0 (grow) 1 (shrink) auto (basis).

Создадим два блока:

.square#one {
  flex: 2 1 300px;
}
.square#two {
  flex: 1 2 300px;
}

У обоих одинаковый flex-basis. Это значит, что оба будут шириной в 300px (ширина контейнера: 600px плюс margin и padding). Но когда контейнер начнет увеличиваться в размерах, первый блок (с большим flex-grow) будет увеличиваться в два раза быстрее, а второй блок (с наибольшим flex-shrink) будет сжиматься в два раза быстрее:

Ещё больше возможностей свойства вы можете найти в анимированном руководстве по CSS flex​.

10

Дополнительно

Как с CSS Flexbox меняется размер?

Когда увеличивается первый блок, он не становится в два раза больше второго, и когда уменьшается второй, он также не становится в два раза меньше первого. Это происходит из-за того, что flex-grow и flex-shrink отвечают за темп роста и сокращения.

Немного математики

Начальный размер контейнера: 640px. Вычтем по 20px с каждой стороны для padding, и у нас останется 600px для двух блоков. Когда ширина контейнера становится равной 430px (потеря в 210px), первый блок (flex-shrink: 1) теряет 70px. Второй блок (flex-shrink: 2) теряет 140px. Когда контейнер сжимается до 340px, мы теряем 300px. Первый блок теряет 100px, второй — 200px. То же самое происходит и с flex-grow.

Если вы также интересуетесь CSS Grid, можете ознакомиться с нашей статьёй, где мы рассматриваем Flexbox и Grid.

Перевод статьи «How Flexbox works — explained with big, colorful, animated gifs»

Генератор flex, flexbox

Описание flex генератора

Общие сведения

Основная идея flex генератора сделать удобным процесс разработки flex конструкций: обеспечив наглядность и предоставив широкий набор дополнительных настроек. Данный генератор предоставляется бесплатно и без каких-либо ограничений на сайте cssworld.ru.

Для простоты, здесь и далее, контейнером называется родительский элемент, а блоками называются дочерние элементы flex технологии.

Использование

Каждый параметр имеет возможность выбора предустановленных значений. Значения по умолчанию выделены фоном. Параметры предусматривающие произвольные значения можно изменять самостоятельно.

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

Для удобства, процесс поделен на три последовательные составные части, размещенных в соответствующих вкладках, а также текущий справочный раздел: Контейнер, Блоки, Результат

1. Контейнер

Настройка контейнера flex блоков через установку параметров. Данные настройки имеют отношение исключительно к родительскому элементу flex блоков.

2. Блоки

Настройка flex блоков. Возможно установить количество дочерних блоков, сбросить значения до установленных по умолчанию, установить значения общие для всех блоков или для каждого отдельные значения.

Для установки значений конкретному блоку его необходимо предварительно выделить. Выделение блока возможно по клику на нем. Повторный клик снимает выделение. То же самое делает кнопка «Готово» отображаемая при выделенном элементе, а также переключение на другую вкладку снимает выделение.

У выделенного элемента возможно изменить контент (его текстовое наполнение), а также отдельно для него установить и очистить установленные значения.

3. Результат

Помимо результата, отображающего полный код CSS стилей и HTML, здесь возможно установить ряд настроек совместимости не влияющих на визуализацию.

Поддержка старых браузеров

Поддержка включается во вкладке «Результат» при включенной отметке «Поддержка старых браузеров (префиксы)». Данное действие добавляет предшествующие параметры с префиксами -ms- (только для IE10) и -webkit- (все остальные браузеры).

HTML5 | Flexbox

Что такое Flexbox. Flex Container

Последнее обновление: 18.04.2017

Flexbox — это общее название для модуля Flexible Box Layout, который имеется в CSS3. Данный модуль определяет особый режим компоновки/верстки пользовательского интерфейса, который называется flex layout. В этом плане Flexbox предоставляет иной подход к созданию пользовательского интерфейса, который отличается от табличной или блочной верстки. Развернутое описание стандарта по модулю можно посмотреть в спецификации.

Благодаря Flexbox проще создавать сложные, комплексные интерфейсы, где мы с легкостью можем переопределять направление и выравнивание элементов, создавать адаптивные табличные представления. Кроме того, Flexbox довольно прост в использовании. Единственная проблема, которая может возникнуть при его применении, — это кроссбраузерность. Например, в Internet Explorer поддержка Flexbox и то частичная появилась только в последней версии — IE11. В то же время все современные браузеры, в том числе Microsoft Edge, Opera, Google Chrome, Safari, Firefox, имеют полную поддержку данного модуля.

Основными составляющими компоновки flexbox являются flex-контейнер (flex container) и flex-элементы (flex items). Flex container представляет некоторый элемент, внутри которого размещены flex-элементы.

Основные понятия

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

Одно из ключевых понятий представляет main axis или центральная ось. Это условная ось во flex-контейнере, вдоль которой позиционируются flex-элементы.

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

Термины main start и main end описывают соответственно начало и конец центральной оси, а расстояние между между ними обозначается как main size.

Кроме основной оси существует также поперечная ось или cross axis. Она перпендикулярна основной. При расположении элементов в виде строки cross axis направлена сверху вниз, а при расположении в виде столбца она направлена слева направо. Начало поперечной оси обозначается как cross start, а ее конец — как cross end. Расстояние между ними описывается термином cross size.

То есть, если элементы располагаются в строку, то main size будет представлять ширину контейнера или элементов, а cross size — их высоту. Если же элементы располагаются в столбик, то, наоборот, main size представляет высоту контейнера и элементов, а cross size — их ширину.

Создание flex-контейнера

Для создания flex-контейнера необходимо присвоить его стилевому свойству display одно из двух значений: flex или inline-flex.

Создадим простейшую веб-страницу, которая применяет flexbox:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			.flex-container {
				display: flex;
			}
			.flex-item {
				text-align:center;
				font-size: 1. 1em;
				padding: 1.5em;
				color: white;
			}
			.color1 {background-color: #675BA7;}
			.color2 {background-color: #9BC850;}
			.color3 {background-color: #A62E5C;}
        </style>
    </head>
    <body>
        <div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
		</div>
    </body>
</html>

Для контейнера flex-container установлено свойство display:flex. В нем располагается три flex-элемента.

Если значение flex определяет контейнер как блочный элемент, то значение inline-flex определяет элемент как строчный (inline). Рассмотрим оба способа на примере:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			. flex-container {
				display: flex;
				border:2px solid #ccc;
			}
			.inline-flex-container {
				display: inline-flex;
				border:2px solid #ccc;
				margin-top:10px;
			}
			.flex-item {
				text-align:center;
				font-size: 1.1em;
				padding: 1.5em;
				color: white;
			}
			.color1 {background-color: #675BA7;}
			.color2 {background-color: #9BC850;}
			.color3 {background-color: #A62E5C;}
        </style>
    </head>
    <body>
        <div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
		</div>
		
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
		</div>
    </body>
</html>

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

Готовы ли мы использовать Flexbox?

гибкое прилагательное
1. способен сгибаться или сгибаться, может быть легко модифицирован для реагирования на измененные обстоятельства или условия.

имя существительное
1. жесткий, как правило, прямоугольный контейнер.

Модуль Flexible Box, также известный как flexbox, является самым последним и лучшим на данный момент. Он углубляется в основы блочной модели CSS, предоставляя нам мощный и очень полезный модуль для конфигурации макетов. Это легко определяется в нашем CSS и разметке, а адаптивные адаптации — это всего лишь медиа-запрос. Подумайте о мире, где нам не нужно очищать плавающие области или использовать фреймворки или массы кода для создания адаптивных сеток . Flexbox делает всю грязную работу. Для нас это просто простая реализация. Мы определяем флекс-контейнер, и в нем есть флекс-элементы.

Что такое Flexbox?

Вот определение flexbox, согласно MDN :

Гибкая коробка CSS3, или flexbox, представляет собой режим макета, обеспечивающий расположение элементов на странице таким образом, что элементы ведут себя предсказуемо, когда макет страницы должен соответствовать разным размерам экрана и разным устройствам отображения.

Проще говоря, мы можем разметить несколько flex-элементов внутри flex-контейнера и определить расположение компоновки с помощью нашего CSS. У нас есть множество вариантов при определении нашей компоновки, которые делают возможности бесконечными. Вот некоторые из них:

1. flex-direction
2. justify-content Другими словами, если у нас есть 3 элемента при общей общей ширине 50% их контейнера, мы можем указать, следует ли упаковать элементы слева, справа, по центру, распределить слева направо с равным интервалом между ними. их, наряду с некоторыми другими вариантами.
3. flex-wrap

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

История Flexbox

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

В двух словах:

• Спецификация 2009 года была выпущена, и вместе с ней пришли все объявления типа коробки. Если вы видите какие-либо учебные пособия или примеры CSS, которые используют свойства типа box- Вот индекс собственности от 2009 спец .
• В 2011 году спецификации немного неловко изменились. Flex-контейнер был определен с помощью box-*display: flexboxкоторый вы можете увидеть здесь ). Была также функция flex () .
• В 2012 году спецификация была обновлена ​​до того, что мы знаем сегодня. Если вы видите display: inline-flexboxdisplay: flex

Похоже, что текущая версия здесь, чтобы остаться, и это очень всеобъемлющий. Вот текущая спецификация от W3C, которая содержит каждую деталь.

Flexbox в действии

Достаточно поговорить о flexbox, давайте теперь рассмотрим базовый пример. Вот наша разметка:

 <div>
  <div>
    <h3>Item 1</h3>
  </div>
  <div>
    <h3>Item 2</h3>
  </div>
  <div>
    <h3>Item 3</h3>
  </div>
  <div>
    <h3>Item 4</h3>
  </div>
</div>

А вот CSS для запуска flexbox:

 .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.item {
  padding: 20px;
  width: 22%;
  background-color: rgb(255,150,100);
}

Это делает элемент .container.item Вот демонстрация CodePen:

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

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

Приятно знать, что поддержка браузеров высока и растет, и мы можем увидеть разбивку, посмотрев на flexbox «Можно ли использовать…» . Он поддерживается в IE10 и выше и во всех других браузерах, кроме Opera Mini. Это очень здорово видеть. Если вы ищете IE9 и ниже, вам нужно пойти по маршруту polyfill / fallback.

К сожалению, единственным доступным полифилом является Flexie , который включает модель flexbox 2009 года в неподдерживаемых браузерах. Полифилов для нового синтаксиса не существует (хотя Ричард Эррера, который создал оригинальный полифилл flexbox , работает над одним для обновленного синтаксиса ). В любом случае, вы обнаружите, что хотите сначала не использовать полифилы, поскольку они, как правило, медленные.

Как правило, отступления должны быть простыми в реализации. Modernizr , инструмент обнаружения функций, позволяет нам определить, поддерживает ли браузер flexbox (устаревший и текущий), поэтому таргетинг должен быть простым и должен выглядеть примерно так:

 . container {
  display: block;
}

.flexbox .container {
  display: flex;
}

Если Modernizr не ваша вещь, и вы не идете по дороге Opera, то условный CSS может быть всем, что вам нужно, чтобы помочь вам разобраться с IE9 и ниже.

Поставщик префиксов

Синтаксис flexbox, как показано выше, выглядит лаконичным и симпатичным, но это потому, что я даже не начал говорить о префиксах поставщиков. Flexbox — это настоящий кошмар с префиксами поставщиков, в основном из-за того, что спецификация менялась 3 раза за 3 года. Старые браузеры WebKit по-прежнему используют свойства с префиксом webkit

Если вам нужно поддерживать все эти более старые реализации, вам понадобится множество *-box*-flexbox*-flex Скомпилированный CSS для нашего .container

 .container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

Это не красиво! Но есть решения в нашем распоряжении.

Autoprefixer

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

Сас и компас

Sass также может прийти сюда на помощь, если мы настроим некоторые миксины, чтобы мы начали работать. Вот набор миксов Sass и базовая реализация, взятые из руководства CSS-Tricks для flexbox :

 @mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

. container {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}

Compass — это фреймворк для CSS, который предлагает массу миксов для авторизации наших файлов Sass. У них есть миксин для flexbox, но, к сожалению, он для старого синтаксиса . Тем не менее, Autoprefixer (упомянутый выше) прекрасно интегрируется с Compass и обрабатывает все префиксы для вас без необходимости изменять рабочий процесс. Ухоженная.

Наконец, если вы используете PHP в качестве препроцессора CSS, вам может понадобиться взглянуть на функции Flexbox, которые предоставляют несколько простых в использовании методов для работы с различными частями flexbox.

Итак … Готовы ли мы использовать Flexbox?

Мы посмотрели на то, что такое flexbox, откуда он взялся, как его использовать, поддержка, откат, префикс и все работы. Но все же, мы должны спросить себя, готовы ли мы начать внедрять это в наших проектах. Для меня ответ — оглушительное Да . Но у этого громкого да есть некоторый основной акцент:

1. Знайте свой проект, желаемый результат и ваш целевой рынок. Если вы публикуете мобильные приложения HTML5, тогда сделайте это. Если вы разрабатываете систему бухгалтерского учета для бизнеса с использованием Windows 98, вам, вероятно, нужно держаться подальше!
2. Поймите, что заполнение старой версии может помочь вам, но замедлит работу и без того медленных браузеров . В общем, я рекомендую держаться подальше от полифилсов — нет смысла тормозить и без того старую систему.

Так что продолжайте учиться, практиковаться и внедрять 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 — Выровнять flexbox с flex-direction: column по вертикальному центру

  .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 
  

 . коробка{
     граница: сплошной красный 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 
  

  .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 
  

  justify-content: center
  

 
<раздел>
   
 Пункт 1 
   
 Пункт 2 
   
 Пункт 3 
   
 Пункт 4 
   
 Пункт 5 

  

 .basic-flex {
     дисплей: гибкий;
     &> * {
         гибкость: 1 0 авто;
         дисплей: гибкий;
         justify-content: center;
         align-items: center;
     }
}
  

  дисплей: -webkit-box;
    дисплей: -webkit-flex;
    дисплей: -ms-flexbox;
    дисплей: гибкий;  

  -webkit-box-orient: горизонтально;
    -webkit-box-direction: нормальный;
    -webkit-flex-direction: row;
        -ms-flex-direction: ряд;
            flex-direction: ряд;  

  -webkit-flex-wrap: обертка;
        -ms-flex-wrap: обертка;
            flex-wrap: обертка;  

  -webkit-box-orient: горизонтально;
    -webkit-box-direction: нормальный;
    -webkit-flex-flow: перенос строк;
        -ms-flex-flow: перенос строк;
            flex-flow: перенос строк;  

  -webkit-box-pack: обосновать;
    -webkit-justify-content: пробел между;
        -ms-flex-pack: обосновать;
            justify-content: пробел между;  

  -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;  

  -webkit-align-content: center;
        -ms-flex-line-pack: по центру;
            выровнять контент: центр;  

  -webkit-box-flex: 1;
        -webkit-flex: 1 0 авто;
            -ms-flex: 1 0 авто;
                гибкость: 1 0 авто;  

  -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;  

  -webkit-flex-shrink: 0;
            -ms-flex-negative: 0;
                гибкость-усадка: 0;  

  -webkit-flex-base: авто;
            -ms-flex-предпочтительный размер: авто;
                флекс-основа: авто;  

  -webkit-box-порядковая-группа: 2;
        -webkit-order: 1;
            -ms-flex-order: 1;
                заказ: 1;  

  -webkit-align-self: гибкий конец;
            -ms-flex-item-align: конец;
                align-self: гибкий конец;  

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

  
 Я контейнер flexbox! 
  

  
 Я встроенный контейнер flexbox! 
  

  

  
 Элемент Flex 1 
  
 Элемент Flex 2 
  
 Элемент Flex 3 


  
 Элемент Flex 1 
  
 Элемент Flex 2 
  
 Элемент Flex 3 
  

  

  
 Элемент Flex 1 
  
 Элемент Flex 2 
  
 Элемент Flex 3 


  
 Элемент Flex 1 
  
 Элемент Flex 2 
  
 Элемент Flex 3 
  

  
... 
 ... 
 ... 
 ... 
 ... 
 ... 
  

  
... 
 ... 
 ... 
 ... 
 ... 
  

  
 Выровненный гибкий элемент 
 Выровненный гибкий элемент 
 Выровненный гибкий элемент 
 Выровненный гибкий элемент 
 Выровненный гибкий элемент 
  

  

  
 Гибкий элемент с большим количеством контента 
  
 Элемент Flex 
  
 Элемент Flex 
  

  

  
 Элемент Flex 
  
 Элемент Flex 
  
 Третий гибкий элемент 
  

  

  
 Элемент Flex 
  
 Элемент Flex 
  

  

  
 Элемент Flex 
  
 Элемент Flex 
  
 Элемент Flex 



  
 Элемент Flex 
  
 Элемент Flex 
  
 Элемент Flex 



  
 Элемент Flex 
  
 Элемент Flex 
  
 Элемент Flex 
  

  

  
 Элемент Flex 
  
 Элемент Flex 
  
 Элемент Flex 



  
 Элемент Flex 
  
 Элемент Flex 
  
 Элемент Flex 
  

  

  ...

  

  

  ...

  

  

  ...

  

  

  
 Первый гибкий элемент 
  
 Второй гибкий элемент 
  
 Третий гибкий элемент 
  

  

  ...

  

  
... 
  

  
 ... 
  

  
... 
  

  
 ... 
  

  
... 
  

  

  

    
  
  

    Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его.
  
  

  

  

    
  
  

    Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его.
  
  

  "изгиб": (
      отзывчивый: правда,
      свойство: 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,
      значения: (
        начало: гибкий старт,
        конец: гибкий конец,
        центр: центр,
        исходный уровень: исходный уровень,
        растянуть: растянуть,
      )
    ),
    "align-content": (
      отзывчивый: правда,
      свойство: align-content,
      значения: (
        начало: гибкий старт,
        конец: гибкий конец,
        центр: центр,
        между: пробел-между,
        вокруг: пространство вокруг,
        растянуть: растянуть,
      )
    ),
    "align-self": (
      отзывчивый: правда,
      свойство: align-self,
      значения: (
        авто: авто,
        начало: гибкий старт,
        конец: гибкий конец,
        центр: центр,
        исходный уровень: исходный уровень,
        растянуть: растянуть,
      )
    ),
    "заказывать": (
      отзывчивый: правда,
      свойство: заказ,
      значения: (
        первый: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        последний: 6,
      ),
    ),
      

 



   
   


    
 Боже мой, я в центре внимания 
 

  

  html {
   высота: 100%;
}

тело {
   дисплей: -webkit-box; / * СТАРОЕ: Safari, iOS, браузер Android, старые браузеры WebKit.* /
   дисплей: -moz-box; / * СТАРЫЙ: Firefox (с ошибками) * /
   дисплей: -ms-flexbox; / * MID: IE 10 * /
   дисплей: -webkit-flex; / * НОВИНКА, Chrome 21–28, Safari 6.1+ * /
   дисплей: гибкий; / * НОВИНКА: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ * /

   -webkit-box-align: center; -moz-box-align: center; /* СТАРЫЙ… */
   -ms-flex-align: center; / * Теперь вы знаете упражнение… * /
   -webkit-align-items: center;
   align-items: center;

   -webkit-box-pack: по центру; -moz-box-pack: по центру;
   -ms-flex-pack: по центру;
   -webkit-justify-content: center;
   justify-content: center;

   маржа: 0;
   высота: 100%;
   width: 100% / * необходимо для Firefox * /
}

h2 {
   дисплей: -webkit-box; дисплей: -moz-box;
   дисплей: -ms-flexbox;
   дисплей: -webkit-flex;
   дисплей: гибкий;
   -webkit-box-align: center; -moz-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;

   высота: 10 бэр;
}  

  кузов {
   дисплей: гибкий;
}  

  кузов {
   дисплей: гибкий;
   justify-content: center;
}  

  кузов {
   / * Не забудьте использовать другие версии для IE 10 и более старых браузеров! * /
   дисплей: гибкий;
   justify-content: center;
   align-items: center;
}  

  h2 {гибкий;
   align-items: center;
   высота: 10 бэр;
}  

  раздел {
   / * удалил другие стили для экономии места * /
   -prefix-box-flex: 1; / * старая спецификация webkit, moz * /
   гибкость: 1;
   высота: 250 пикселей;
}  

  section: hover {
   -prefix-box-flex: 2;
   гибкость: 2;
   курсор: указатель;
}  

  заголовок {
   -префикс-поле-порядковая-группа: 1; / * старая спецификация; должен быть положительным * /
   -ms-flex-order: -1; / * Синтаксис IE 10 * /
   заказ: -1; / * новый синтаксис * /
}

section [aria-Press = "true"] {
   / * Устанавливаем порядок ниже 0, чтобы он перемещался перед другими элементами раздела,
      кроме старой спецификации, где она должна быть положительной.* /
   -префикс-поле-порядковая-группа: 1;
   -ms-flex-order: -1;
   заказ: -1;

   -prefix-box-flex: 3;
   гибкость: 3;
   максимальная ширина: 370 пикселей; / * Не дает ему стать слишком широким. * /
}  

 .flex {
    дисплей: -webkit-box;
    дисплей: -moz-box;
    дисплей: -ms-flexbox;
    дисплей: -webkit-flex;
    дисплей: гибкий;
}

.flex.flex - reverse {
    -webkit-box-orient: горизонтально;
    -moz-box-orient: горизонтальный;
    -webkit-box-direction: обратный;
    -moz-box-direction: реверс;
    -webkit-flex-direction: обратный ряд;
    -ms-flex-direction: обратный ряд;
    flex-direction: строка-реверс;
}

.flex - row {
    -webkit-box-orient: вертикальный;
    -moz-box-orient: вертикальный;
    -webkit-box-direction: нормальный;
    -moz-box-direction: нормальный;
    -webkit-flex-direction: столбец;
    -ms-flex-direction: столбец;
    flex-direction: столбец;
}

.flex - row.flex - reverse {
    -webkit-box-orient: вертикальный;
    -moz-box-orient: вертикальный;
    -webkit-box-direction: обратный;
    -moz-box-direction: реверс;
    -webkit-flex-direction: обратный столбец;
    -ms-flex-direction: обратный столбец;
    flex-direction: обратный столбец;
}

.flex - justify-content - space-between {
    -webkit-box-pack: обосновать;
    -moz-box-pack: обосновать;
    -ms-flex-pack: обосновать;
    -webkit-justify-content: пробел между;
    justify-content: пробел между;
}

.flex - justify-content - space-around {
    -webkit-box-pack: обосновать;
    -moz-box-pack: обосновать;
    -ms-flex-pack: распространять;
    -webkit-justify-content: пространство вокруг;
    justify-content: пространство вокруг;
}

.flex - justify-content - center {
    -webkit-box-pack: по центру;
    -moz-box-pack: по центру;
    -ms-flex-pack: по центру;
    -webkit-justify-content: center;
    justify-content: center;
}

.flex - justify-content - start {
    -webkit-box-pack: начать;
    -moz-box-pack: начать;
    -ms-flex-pack: start;
    -webkit-justify-content: гибкий старт;
    justify-content: гибкий старт;
}

.flex - justify-content - end {
    -webkit-box-pack: конец;
    -moz-box-pack: конец;
    -ms-flex-pack: конец;
    -webkit-justify-content: гибкий конец;
    justify-content: гибкий конец;
}

.flex - align-items - start {
    -webkit-box-align: начало;
    -moz-box-align: начало;
    -ms-flex-align: start;
    -webkit-align-items: гибкий старт;
    выровнять элементы: гибкий старт;
}

.flex - align-items - end {
    -webkit-box-align: конец;
    -moz-box-align: конец;
    -ms-flex-align: конец;
    -webkit-align-items: гибкий конец;
    выровнять элементы: гибкий конец;
}

.flex - align-items - center {
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.flex - align-items - baseline {
    -webkit-box-align: базовая линия;
    -moz-box-align: базовая линия;
    -ms-flex-align: базовая линия;
    -webkit-align-items: базовая линия;
    выровнять элементы: базовая линия;
}

.flex - align-items - stretch {
    -webkit-box-align: растянуть;
    -moz-box-align: растянуть;
    -ms-flex-align: растянуть;
    -webkit-align-items: растянуть;
    align-items: stretch;
}

/*.flex--flex-order {
    -webkit-box-порядковая-группа: 2;
    -moz-box-порядковая-группа: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    заказ: 2
} * /
.flex - flex-grow-all> * {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    гибкий рост: 1
}
.flex - flex-grow-last: last-child {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    гибкий рост: 1
}

.flex - flex-grow-middle: nth-child (2) {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    гибкий рост: 1
}

.flex-center-wrapper {
    дисплей: -webkit-box;
    дисплей: -moz-box;
    дисплей: -ms-flexbox;
    дисплей: -webkit-flex;
    дисплей: гибкий;

    -webkit-box-pack: по центру;
    -moz-box-pack: по центру;
    -ms-flex-pack: по центру;
    -webkit-justify-content: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}