Верстка flex: Вёрстка на Flexbox в CSS. Полный справочник | by Stas Bagretsov

Как работает Flex-grow в CSS. Подробное руководство | by Stas Bagretsov

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

Но я нашел статью `flex-grow` is weird. Or is it?, которая максимально ясно показывает то, как работает flex-grow и то, как он рассчитывается. Ниже будет её перевод на русский язык.

👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️

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

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

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

Я думал, что все flex элементы с flex-grow с параметром 1 будут иметь одинаковую ширину. А если один из элементов будет иметь flex-grow с параметром 2, то этот элемент будет в два раза больше чем другие в этой группе.

Это звучит великолепно. Кажется, что именно так все и происходит в примере указанном выше. Родительский элемент имеет ширину 900px, секция с flex-grow:2 получает ширину в 600px, а боковой элемент с flex-grow:1 имеет ширину 300px.

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

Только что я объяснил как flex-grow не работает, но я показал вам демо, которое на самом деле не делает то, что по моим утверждениям это не делает. Далее в статье я вам объясню причину этого.

Чтобы прояснить ситуацию, позвольте показать вам еще один Pen. В нём такие же установки, как и в первом, но на этот раз секция и боковые элементы не пустые. Теперь соотношение больше не 2:1 и элемент с flex-grow выставленным на один больше, чем элемент с flex-grow на 2.

Если мы применим display:flex для родительского элемента и ничего больше не поменяем, то дочерние элементы встанут горизонтально, не смотря ни на что. Если будет недостаточно места, то они сократятся в размере. С другой стороны, если будет слишком много места, то они не будут расти, потому что Flexbox хочет, чтобы мы определили насколько им нужно вырасти. Таким образом, прежде чем указывать браузеру каким по ширине должен быть элемент, flex-grow определяет как оставшееся место распределяется среди flex элементов и насколько велика доля каждого из них.

Или другими словами:
Flex контейнер распределяет свободное место своим элементам, пропорционально их flex-grow фактору, чтобы заполнить контейнеры или урезать их, пропорционально их flex-shrink фактору, для того того, чтобы пресечь переполнение контейнера.

#Демонстрация
Эту концепцию гораздо проще понять, если мы её визуализируем.

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

Далее, мы решаем сколько частей свободного места получит каждый элемент. В нашем предыдущем примере первый элемент получил 2/3 оставшегося места flex-grow:2 и второй элемент 1/3 flex-grow:1. Зная сколько flex-grow значений мы можем иметь в сумме, мы будем знать на какое число делить оставшееся место.

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

#Считаем
Теории и визуальные представления это хорошо, но давайте по пачкаем руки и сделаем математические вычисления для примера выше.

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

Ширина родителя: 900px

Ширина секции: 99px

Ширина бокового элемента: 623px

Общее количество flex-grow значений: 3

1. Во первых нам надо рассчитать оставшееся место. Это довольно легко, мы возьмем ширину родителя и вычтем общую ширину изначальных дочерних элементов.

900 — 99 — 623 = 178

2. Далее нам нужно определить размер каждого значения flex-grow

Теперь, когда у нас есть оставшееся место, нам нужно определить на сколько частей мы хотим его разделить. Очень важно понимать, что мы не делим оставшееся место на количество элементов, а делим на общее количество flex-grow значений. В нашем случае это будет 3 (flex-grow:2 + flex-grow:1)

178 / 3 = 59.33

3. Наконец-то разрезанное оставшееся место будет распределено между всеми элементами

Основываясь на их flex-grow значениях секция получит 2 куска (2*59.33), а боковая сторона получит 1 кусок (1*59.33). Эти числа добавляются к изначальной ширине каждого элемента.

99 + (2 * 59,33) = 217,66 (~218px) | Изначальная ширина секции + (значение flex-grow для секции * размер одного flex-grow)

623 + (1* 59.33) = 682.33 (~682px) | Изначальная ширина боковой стороны + (значение flex-grow боковой стороны * размер одного flex-grow)

Теперь вообще легко, правда?

Отлично, но почему сработало первое демо?

У нас есть формула, теперь давайте разберемся почему мы получили нужные результаты в первой демке, даже не понимая как мы это делаем.

Ширина родителя: 900px

Ширина секции: 0px

Ширина бокового элемента: 0px

Общее количество flex-grow значений: 3

1. Рассчитываем оставшееся место.

900–0–0 = 900

2. Определяем размер каждого значения flex-grow

900 / 3 = 300

3. Распределяем нарезанное свободное место

0 + (2 * 300) = 600

0 + (1 * 300) = 300

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

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

Но что поделать, если нет оставшегося места или что делать в том случае, если мы не хотим полагаться на изначальную ширину элемента, но значение flex-grow надо выставить? Мы что, не можем использовать flex-grow?

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

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

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

Я адаптировал наш предыдущий пример, добавив flex-basis для каждого элемента. Вот он. Давайте посмотрим, как это происходит.

1. Рассчитываем оставшееся место

900–400–200 = 300

2. Определяем ширину элемента flex-grow

300/3= 100

3. Распределяем оставшееся место

400 + (2 * 100) = 600

200 + (1 * 100) = 300

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

Чтобы покрыть вообще все сферы и ситуации, которые случаются с flex-grow, давайте посмотрим что будет, если мы добавим padding и margin. На самом деле ничего особенного. На первом шаге вычислений вам просто нужно не забыть также вычесть внешние отступы.

Единственное, что вам нужно подметить, так это в случае с box-sizing flex-basis ведет себя как свойство width. Это означает то, что вычисления как и результат меняются, если box-sizing свойство меняется. Если box-sizing был выставлен на border-box, то вам надо работать только с flex-basis и margin значениями в ваших вычислениях, потому что значение padding уже включено в ширину.

Несколько полезных примеров

И так, достаточно математики. Давайте посмотрим несколько примеров того, как вы можете эффективно применить flex-grow в своих проектах.

#Скажи нет width: [x]%
Так как оставшееся место распределяется автоматически, нам не нужно думать о значениях ширины, если мы хотим, чтобы наши дочерние элементы заполняли весь родительский элемент.

#Святой грааль трех колоночного “жидкого” макета с шириной в пикселях
Смеси фиксированных и флюидных широт в column шаблонах возможны с флоатами, но это и не понятно и просто не гибкое решение. Конечно с помощью Flexbox и немного flex-grow и flex-basis магии это становится вполне возможным.

#Заполняем оставшееся место любым элементом
Если вы, к примеру, имеете поле ввода прямо за лейблом и хотите, чтобы это поле занимало все оставшееся место, вам больше не нужны убоговатые хаки в верстке. Смотрите.

Прислушиваемся к спецификациям

Следуя спецификации, нам стоит использовать flex сокращения, а не flex-grow напрямую.

Но будьте аккуратны! Если вы просто будете использовать flex:1; некоторые из примеров выше не будут работать, потому что значения выставленные для всеобщего удобства не равны дефолтным значениям и это мешает нашим целям.

Если вы хотите использовать flex в нашем случае, то вам нужно определять его параметры вот так:

flex: 2 1 auto;* (<flex-grow> | <flex-shrink> | <flex-basis>) *

Flex-grow сложный и запутанный? Всё совсем не так плохо, как кажется. Нам нужно просто понять как он работает и что он делает. Если у элемента flex-grow выставлен на 3, это не означает того, что он будет в три раза больше чем элемент у которого flex-grow стоит с параметром 1. Это будет означать то, что он получит в три раза больше пикселей к изначальной ширине, чем другой элемент.

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

Мистический inline-flex и что он делает | by Stas Bagretsov

К трем контейнерам в синем цвете применяем display: inline-flex, в них есть три потомка div’а, которые в красном цвете имеют flex:1 и min-width: 50px.

Каждый родительский контейнер стоит сразу за другим, потому что они могут уместиться в один ряд. Ширина родительского контейнера зависит от размера потомков, которым тут был выставлен min-width в 50px.

CSS, но уже с inline-flex:

.container--inline-flex {
display: inline-flex;
}

HTML:

<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>

Элемент с display:flex очень схож с элементом, на котором стоит display: block, потому что он забирает сразу всю строку. Однако, в сравнении с представленными до этого свойствами позиционирования, его потомки могут быть размещены в контейнере куда более гибко и динамично, нежели это было возможно ранее.

Если мы изменим display: flex на display: inline-flex:

Родительский контейнер будет показываться инлайново.

К потомкам могут быть применены все flex-свойства, разницы с display: flex в этом плане совсем не будет.

В общем, это означает то, что если элементы потомки не слишком велики, то два контейнера с display: inline-flex могут идти бок о бок в одной строке.

У других display свойств тоже есть свои инлайновые близнецы:

У block есть inline-block

У table есть inline-table

И даже у grid есть inline-grid

Больше про CSS Flex и его свойства вы можете прочитать в статье — Вёрстка на Flexbox в CSS. Полный справочник

Учебник CSS 3. Статья «Верстка по Flexbox. Часть 1.»

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

В cтатье «Плавающие элементы в CSS» мы с вами научились строить макеты страниц на основе плавающих элементов, они до настоящего времени актуальны и наиболее распространены, так как в совокупности с позиционированием позволяют выполнить любую задачу связанную с версткой страниц. Информационные технологии и front-end разработка в частности, это не то место, где Вы будете сидеть в уютной пещере, иногда приходится из неё выбираться и осваивать новую.

Пока для нас готовят новую комфортабельную Grid пещеру, мы с Вами подготовимся к её освоению в будущем и переходим к изучению самой актуальной, и современной в настоящее время модели построения макетов страниц — Flexbox.

Что такое Flexbox?

• вертикальное выравнивание блока внутри родительского элемента.
• размещение колонок макета одинаковой высоты независимо от наполнения их содержимым.
• расположение дочерних элементов контейнера в необходимом нам направлении, распределяя при этом между собой доступную ширину, или высоту, независимо от её доступного количества, не вызывая при этом переполнения родительского элемента.
• изменять порядок элементов независимо от порядка их описания в объектной модели документа DOM.

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

Как начать верстать по Flexbox?

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

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

<section> <!-- флекс контейнер -->
	<div></div> <!-- дочерний флекс элемент -->
	<div></div> <!-- дочерний флекс элемент -->
	<div> <!-- дочерний флекс элемент -->
		<p>Первый абзац</p> <!-- не является флекс элементом -->
		<p>Второй абзац</p> <!-- не является флекс элементом -->
		<p>Третий абзац</p> <!-- не является флекс элементом -->
	</div>
</section>

У вас может возникнуть логичный вопрос, а что требуется для того, чтобы сделать флекс контейнер? Для этого достаточно установить свойство display элемента в значение flex, или inline-flex:

section {
	display: flex; // элемент отображается как блочный флекс контейнер
}

Перейдем к рассмотрению наглядного примера:

<!DOCTYPE html>
<html>
<head>
	<title>Пример размещения флекс контейнера</title>
<style> 
section {
	display: flex; /* блочный флекс контейнер */
}
div {
	background: rgb(0,150,208); /* цвет заднего фона */
	color: #fff; /* цвет текста */
	margin: 3px; /* внешние отступы со всех сторон */
}
</style>
</head>
	<body>
		<section> <!-- флекс контейнер -->
			<div></div> <!-- дочерний флекс элемент -->
			<div></div> <!-- дочерний флекс элемент -->
			<div> <!-- дочерний флекс элемент -->
				<p>Первый абзац</p> <!-- не является флекс элементом -->
				<p>Второй абзац</p> <!-- не является флекс элементом -->
				<p>Третий абзац</p> <!-- не является флекс элементом -->
			</div>
		</section>
	</body>
</html>

В этом примере мы установили для элемента <section> значение свойство display элемента в значение flex, а это означает, что он стал блочным флекс контейнером, а все вложенные в него дочерние элементы <div> стали флекс элементами. Для этих элементов мы указали стили, определяющие цвет текста (color), заднего фона (background) и внешние отступы (margin).

У многих редакторов кода по умолчанию встроен, или доступен для скачивания удобный плагин для быстрой разметки Emmet, он позволяет сделать основную разметку этого примера следующим образом: section>div*3>lorem + Tab (значение lorem генерирует текст, который имеется на изображении ниже).

Обратите внимание, что не прилагая особых усилий мы получили размещение колонок нашего макета одинаковой высоты независимо от наполнения их содержимым и это замечательно. Элементы <p> не являются по умолчанию флекс элементами и расположены в потоке третьего элемента <div> как обычные блочные элементы. Если в этом есть необходимость, то чтобы сделать их флекс элементами, как вы можете догадаться, необходимо для их родителя установить, что он является блочным (flex), или строчным (inline-flex) флекс контейнером, но об этом в следующем примере.

Результат нашего примера:

Строчный флекс контейнер

По аналогии с блочными элементами флекс контейнеры могут быть строчными. Давайте разберем в чем заключается отличие строчных флекс контейнеров от блочных. В предыдущем примере мы рассмотрели использование блочного контейнера, как и обычный блочный элемент он занимает всю ширину экрана, и ведет себя как обычный элемент уровня блока. Что касается строчных флекс контейнеров, то они становятся обычными встроенными элементами, сохраняя при этом гибкость элементов.

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

<!DOCTYPE html>
<html>
<head>
	<title>Отличие inlline-flex контейнеров от flex контейнеров.</title>
<style> 
.inline-flex {
	display: flex; /* блочный флекс контейнер */
}
.flex  {
	display: flex; /* блочный флекс контейнер */
}
.inline-flex, flex {
	border: 1px solid orangered; /* сплошная граница размером один пиксель оранжево-красного цвета */
	margin: 3px; /* внешние отступы со всех сторон */
}
div > div {
	width: 50px; /* ширина элемента */
	height: 50px; /* высота элемента */
	background: orange; /* цвет заднего фона */
	margin: 3px; /* внешние отступы со всех сторон */
}
</style>
</head>
	<body>
		<div class = "inline-flex"> <!-- строчный флекс контейнер -->
			<div></div> <!-- дочерний флекс элемент -->
			<div></div> <!-- дочерний флекс элемент -->
			<div></div> <!-- дочерний флекс элемент -->
			<div></div> <!-- дочерний флекс элемент -->
			<div></div> <!-- дочерний флекс элемент -->
		</div>
		<div class = "inline-flex"> <!-- строчный флекс контейнер -->
			<div></div> <!-- дочерний флекс элемент -->
			<div></div> <!-- дочерний флекс элемент -->
			<div></div> <!-- дочерний флекс элемент -->
			<div></div> <!-- дочерний флекс элемент -->
			<div></div> <!-- дочерний флекс элемент -->
		</div>
		<div class = "flex"> <!-- блочный флекс контейнер -->
			<div></div> <!-- дочерний флекс элемент -->
			<div></div> <!-- дочерний флекс элемент -->
			<div></div> <!-- дочерний флекс элемент -->
			<div></div> <!-- дочерний флекс элемент -->
			<div></div> <!-- дочерний флекс элемент -->
		</div>
		<div class = "flex"> <!-- блочный флекс контейнер -->
			<div></div> <!-- дочерний флекс элемент -->
			<div></div> <!-- дочерний флекс элемент -->
			<div></div> <!-- дочерний флекс элемент -->
			<div></div> <!-- дочерний флекс элемент -->
			<div></div> <!-- дочерний флекс элемент -->
		</div>
	</body>
</html>

В этом примере мы разместили два строчных и два блочных флекс контейнера, внутри них мы разместили по пять элементов <div>, которые автоматически стали флекс элементами. Кроме того, для них мы указали ширину и высоту равную 50 пикселей.

Чтобы быстро сгенерировать подобную верстку с помощью Emmet наберите в редакторе следующее: div.inline-flex*2>div*5 + Tab, и тоже самое только с другим классом div.flex*2>div*5 + Tab.

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

Результат нашего примера:

Направление? Какое направление?

Направление флекс элементов формируется исходя из положения двух осей: главной оси флекс контейнера и его поперечной оси, которая всегда распологается перпендикулярно главной. Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr) располагается слева направо, а поперечная – сверху вниз (это значение по умолчанию), для значения rtl отображается зеркально соответственно.

CSS свойство flex-direction позволяет указать направление, в соответствии с которым располагаются флекс элементы внутри флекс контейнера.

Обращаю Ваше внимание, если элемент не является флекс элементом (не находится внутри родительского элемента, который является блочным, или строчным флекс контейнером), то свойство flex-direction, и любые свойства, предназначенные для работы с флекс элементами не окажут на такие элементы никакого эффекта.

Схематичное отображение работы свойства flex-direction отображено на следующем изображении (при направлении ltr):

Рис. 206 Схематичное отображение работы свойства flex-direction

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
<head>
	<title>Пример указания направления для флекс элементов.</title>
<style> 
.container,
.container2,
.container3,
.container4 {          
	display: flex; /* блочные флекс контейнеры */
}
.container {       
	flex-direction: row; /* флекс элементы отображаются горизонтально, в виде строки */
}
.container2 {       
	flex-direction: row-reverse; /* флекс элементы отображаются горизонтально, в виде строки, но формирование строки идёт в обратном направлении */
}
.container3 {       
	flex-direction: column; /* флекс элементы отображаются вертикально как колонны (формируются сверху вниз) */
}
.container4 {       
	flex-direction: column-reverse; /* флекс элементы отображаются вертикально как колонны (формируются снизу вверх) */
}
div > div {
	width: 50px; /* ширина элемента */
	height: 50px; /* высота элемента */
	border: 3px solid rgb(0,150,208); /* сплошная граница размером 3 пикселя */
	margin: 5px; /* внешние отступы со всех сторон */
}
</style>
</head>
	<body>
			<h4>flex-direction:row</h4>
			<div class = "container"> <!-- строчный флекс контейнер -->
				<div>A</div> <!-- дочерний флекс элемент -->
				<div>B</div> <!-- дочерний флекс элемент -->
				<div>C</div> <!-- дочерний флекс элемент -->
			</div>
			<h4>flex-direction:row-reverse</h4>
			<div class = "container2"> <!-- блочный флекс контейнер -->
				<div>A</div> <!-- дочерний флекс элемент -->
				<div>B</div> <!-- дочерний флекс элемент -->
				<div>C</div> <!-- дочерний флекс элемент -->
			</div>
			<h4>flex-direction:column</h4>
			<div class = "container3"> <!-- блочный флекс контейнер -->
				<div>A</div> <!-- дочерний флекс элемент -->
				<div>B</div> <!-- дочерний флекс элемент -->
				<div>C</div> <!-- дочерний флекс элемент -->
			</div>
			<h4>flex-direction:column-reverse</h4>
			<div class = "container4"> <!-- блочный флекс контейнер -->
				<div>A</div> <!-- дочерний флекс элемент -->
				<div>B</div> <!-- дочерний флекс элемент -->
				<div>C</div> <!-- дочерний флекс элемент -->
			</div>
	</body>
</html>

В этом примере мы разместили четыре блочных флекс контейнера, внутри которых мы разместили по три элемента <div>. С помощью свойства flex-direction мы для каждого флекс контейнера указали свое направление, в соответствии с которым располагаются флекс элементы внутри этих контейнеров:

• Первый блок имеет значение row, в котором флекс элементы отображаются горизонтально, в виде строки. Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr) располагается слева направо, а при значения rtl отображается справо налево. Это значение по умолчанию.
• Второй блок имеет значение row-reverse, в котором флекс элементы отображаются горизонтально, в виде строки по аналогии со значением row, но формирование строки идёт в обратном направлении. Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr) располагается справо налево, а при значения rtl отображается слева направо.
• Третий блок имеет значение column, в котором флекс элементы отображаются вертикально как колонны. Формирование колонны осуществляется сверху вниз.
• Четвертый блок имеет значение column-reverse, в котором флекс элементы отображаются вертикально как колонны по аналогии со значением column, но формирование колонны идёт в обратном направлении (снизу вверх).

Для экономии пространства я скомпоновал результат примера отдельно по каждому контейнеру на следующем изображении:

Однострочные и многострочные контейнеры

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

Схематичное отображение работы свойства flex-wrap отображено на следующем изображении:

Рис. 208 Схематичное отображение работы свойства flex-wrap

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
<head>
	<title>Однострочные и многострочные флекс контейнеры.</title>
<style> 
.container,
.container2,
.container3 {     
	display: flex; /* блочные флекс контейнеры */
}
.container {       
	flex-wrap: nowrap; /* однострочный флекс контейнер (по умолчанию) */
}
.container2 {     
	flex-wrap: wrap; /* многострочный флекс контейнер */
}
.container3 {     
	flex-wrap: wrap-reverse; /* многострочный флекс контейнер (формирование строк идёт в обратном порядке)*/
}
div > div {
	width: 40%; /* ширина элемента */
	height: 25px; /* высота элемента */
	background: rgb(0,150,208); /* цвет заднего фона */
	color: #fff; /* цвет текста */
	margin: 1px; /* внешние отступы со всех сторон */
}
</style>
</head>
	<body>
		<p>flex-wrap:nowrap</p>
		<div class = "container"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
		<p>flex-wrap:wrap</p>
		<div class = "container2"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
		<p>flex-wrap:wrap-reverse</p>
		<div class = "container3"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
	</body>
</html>

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по три элемента <div>, которым задали ширину равную 40% от ширины родительского элемента.

Первый контейнер имеет значение nowrap свойства flex-wrap, это значение по умолчанию и указано в таблице стилей лишь для наглядности. Обратите внимание не смотря на то, что значение ширины всех флекс элементов должно переполнять родительский контейнер, флекс элементы подстраиваются под имеющиеся размеры контейнера и не перемещаются на новую строку, так как наш контейнер является однострочным. Даже, если бы мы указали для элементов значение ширины равное 100% от родительского элемента, то это не повлияло бы на отображение в этом однострочном контейнере.

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

Флекс элементы размещаются слева направо при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr), а при значении rtl размещаются справа налево.

Третий контейнер имеет значение wrap-reverse свойства flex-wrap, это значение указывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов (в случае переполнения) по аналогии со значением wrap, но формирование строк идёт в обратном порядке.

Результат нашего примера:

Универсальное свойство flex-flow

Универсальное свойство flex-flow позволяет в одном объявлении указать значения ранее рассмотренных свойств flex-direction (задает направление, в соответствии с которым располагаются флекс элементы внутри флекс контейнера), и flex-wrap (определяет, будет ли флекс контейнер однострочным, или многострочным).

Это свойство имеет следующий синтаксис:

/* только направление */
flex-flow:"flex-direction";

/* однострочный, или многострочный */
flex-flow:"flex-wrap";

/* оба свойства в одном объявлении */
flex-flow:"flex-direction flex-wrap";

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

<!DOCTYPE html>
<html>
<head>
	<title>Однострочные и многострочные флекс контейнеры.</title>
<style> 
.container,
.container2,
.container3 {     
	display: flex; /* блочные флекс контейнеры */
}
.container {       
	flex-flow: column; /* флекс элементы отображаются вертикально как колонны */
}
.container2 {     
	flex-flow: row-reverse wrap-reverse; /* флекс элементы отображаются горизонтально, в виде строки, которая формируется в обратном направлении и он так же является многострочным флекс контейнером, в котором формирование строк идёт в обратном порядке */
}
.container3 {     
	flex-flow: row-reverse wrap; /* флекс элементы отображаются горизонтально, в виде строки, которая формируется в обратном направлении и он так же является многострочным флекс контейнером */
}
div > div {
	width: 40%; /* ширина элемента */
	height: 25px; /* высота элемента */
	background: rgb(0,150,208); /* цвет заднего фона */
	color: #fff; /* цвет текста */
	margin: 1px; /* внешние отступы со всех сторон */
}
</style>
</head>
	<body>
		<h4>flex-flow: column</h4>
		<div class = "container"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
		<h4>flex-flow: row-reverse wrap-reverse</h4>
		<div class = "container2"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
		<h4>flex-flow: row-reverse wrap</h4>
		<div class = "container3"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
	</body>
</html>

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по три элемента <div>, которым задали ширину равную 40% от ширины родительского элемента.

Первый контейнер имеет значение column свойства flex-flow, это значение определяет, что флекс элементы отображаются вертикально как колонны (это значение аналогично свойтсву flex-direction с одноименным значением).

Второй контейнер имеет значение row-reverse wrap-reverse свойства flex-flow, это значение указывает, что флекс элементы отображаются горизонтально, в виде строки, которая формируется в обратном направлении, и к тому же он является многострочным флекс контейнером, в котором формирование строк идёт в обратном порядке.

Третий контейнер имеет значение row-reverse wrap свойства flex-flow, это значение указывает, что флекс элементы отображаются горизонтально, в виде строки, которая формируется в обратном направлении, и к тому же он является многострочным флекс контейнером.

Результат нашего примера:

Горизонтальное выравнивание

CSS свойство justify-content определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль главной оси флекс контейнера (горизонтально).

Это свойство может использоваться в тех случаях, когда для флекс элементов явно указана ширина, и если ширина всех флекс элементов внутри контейнера не вызывает переполнение контейнера, иначе свойство justify-content не окажет на такой элемент никакого эффекта.

Схематичное отображение работы свойства justify-content отображено на следующем изображении:

Рис. 211 Схематичное отображение работы свойства justify-content

Перейдем к рассмотрению следующего примера:

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства justify-content</title>
<style> 
.container,
.container2,
.container3,
.container4,
.container5 {   
	display: flex; /* блочные флекс контейнеры */
}
.container {       
	justify-content: flex-start; /* флекс элементы позиционируются в начале контейнера */
}
.container2 {       
	justify-content: flex-end; /* флекс элементы позиционируются в конце контейнера */
}
.container3 {       
	justify-content: center; /* флекс элементы позиционируются в центре контейнера */
}
.container4 {       
	justify-content: space-between; /* флекс элементы равномерно распределяются по всей строке (первый и последний прижаты по бокам) */
}
.container5 {       
	justify-content: space-around; /* флекс элементы равномерно распределяются по всей строке */
}
div > div {
	width: 50px; /* ширина элемента */
	height: 50px; /* высота элемента */
	background: rgb(0,150,208); /* цвет заднего фона */
	color: #fff; /* цвет текста */
	margin: 1px; /* внешние отступы со всех сторон */
}
</style>
</head>
	<body>
		<h4>justify-content: flex-start;</h4>
		<div class = "container"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
		<h4>justify-content: flex-end;</h4>
		<div class = "container2"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
		<h4>justify-content: center;</h4>
		<div class = "container3"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
		<h4>justify-content: space-between;</h4>
		<div class = "container4"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
		<h4>justify-content: space-around;</h4>
		<div class = "container5"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
	</body>
</html>

В этом примере мы разместили пять блочных флекс контейнеров, внутри них мы разместили по три элемента <div>, которым задали ширину и высоту равную 50 пикселей.

Первый контейнер имеет значение flex-start свойства justify-content, это значение определяет, что флекс элементы позиционируются в начале контейнера. Это значение по умолчанию и указано лишь для демонстрационной цели.

Второй контейнер имеет значение flex-end свойства justify-content, это значение определяет, что флекс элементы позиционируются в конце контейнера.

Третий контейнер имеет значение center свойства justify-content, это значение определяет, что флекс элементы позиционируются в центре контейнера.

Четвертый контейнер имеет значение space-between свойства justify-content, это значение определяет, что флекс элементы равномерно распределяются по всей строке, при этом первый флекс элемент позиционируются в начале контейнера, а последний флекс элемент позиционируется в конце контейнера.

Пятый контейнер имеет значение space-around свойства justify-content, это значение определяет, что флекс элементы равномерно распределяются по всей строке, при этом пустое пространство между первым и после последнего флекс элемента равно половине между соседними элементами в контейнере.

Результат нашего примера:

В настоящее время добавлена поддержка значения space-evenly свойства justify-content, которое позволяет разместить четный промежуток между каждым элементом, включая начальний и дальний конец контейнера:

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

CSS свойство align-content определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль поперечной оси контейнера (вертикально).

Обращаю Ваше внимание на то, что для того, чтобы свойство возможно было применить к контейнеру, необходимо, чтобы он был многострочным (flex-wrap, или flex-flow со значениями wrap | wrap-reverse).

Схематичное отображение работы свойства align-content отображено на следующем изображении:

Рис. 213 Схематичное отображение работы CSS свойства align-content

Перейдем к рассмотрению следующего примера:

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства align-content</title>
<style> 
.container,
.container2,
.container3,
.container4,
.container5,
.container6 {   
	display: flex; /* блочные флекс контейнеры */
	flex-wrap: wrap; /* многострочный флекс контейнер */
	height: 200px; /* высота контейнера */
	background: rgba(0,0,0,.4); /* цвет заднего фона */
}
.container {       
	align-content: stretch; /* строки внутри флекс контейнера равномерно растягиваются, заполняя свободное пространство (значение по умолчанию) */
}
.container2 {       
	align-content: flex-start; /* строки внутри флекс контейнера располагаются в начале поперечной оси */
}
.container3 {       
	align-content: flex-end; /* строки внутри флекс контейнера располагаются с конца поперечной оси */
}
.container4 {       
	align-content: center; /* строки внутри флекс контейнера располагаются по центру контейнера */
}
.container5 {       
	align-content: space-between; /* строки внутри флекс контейнера равномерно распределяются (первая строка позиционируются в начале поперечной оси, а последняя с конца поперечной оси) */
}
.container6 {       
	align-content: space-around; /* строки внутри флекс контейнера равномерно распределяются */
}
div > div {
	width: 30%; /* ширина элемента */
	background: rgb(0,150,208); /* цвет заднего фона */
	color: #fff; /* цвет текста */
	margin: 1px; /* внешние отступы со всех сторон */
}
</style>
</head>
	<body>
		<h4>align-content: stretch;</h4>
		<div class = "container"> <!-- блочный флекс контейнер -->
			<div>A</div><div>B</div><div>C</div> <!-- дочерние флекс элементы -->
			<div>D</div><div>E</div><div>F</div> <!-- дочерние флекс элементы -->
		</div>
		<h4>align-content: flex-start;</h4>
		<div class = "container2"> <!-- блочный флекс контейнер -->
			<div>A</div><div>B</div><div>C</div> <!-- дочерние флекс элементы -->
			<div>D</div><div>E</div><div>F</div> <!-- дочерние флекс элементы -->
		</div>
		<h4>align-content: flex-end;</h4>
		<div class = "container3"> <!-- блочный флекс контейнер -->
			<div>A</div><div>B</div><div>C</div> <!-- дочерние флекс элементы -->
			<div>D</div><div>E</div><div>F</div> <!-- дочерние флекс элементы -->
		</div>
		<h4>align-content: center;</h4>
		<div class = "container4"> <!-- блочный флекс контейнер -->
			<div>A</div><div>B</div><div>C</div> <!-- дочерние флекс элементы -->
			<div>D</div><div>E</div><div>F</div> <!-- дочерние флекс элементы -->
		</div>
		<h4>align-content: space-between;</h4>
		<div class = "container5"> <!-- блочный флекс контейнер -->
			<div>A</div><div>B</div><div>C</div> <!-- дочерние флекс элементы -->
			<div>D</div><div>E</div><div>F</div> <!-- дочерние флекс элементы -->
		</div>
		<h4>align-content: space-around;</h4>
		<div class = "container6"> <!-- блочный флекс контейнер -->
			<div>A</div><div>B</div><div>C</div> <!-- дочерние флекс элементы -->
			<div>D</div><div>E</div><div>F</div> <!-- дочерние флекс элементы -->
		</div>
	</body>
</html>

В этом примере мы разместили шесть блочных флекс контейнеров, внутри них мы разместили по шесть элементов <div>, которым задали ширину равную 30% от ширины родительского элемента.

Первый контейнер имеет значение stretch свойства align-content, это значение определяет, что строки внутри флекс контейнера равномерно растягиваются, заполняя свободное пространство. Это значение по умолчанию и указано лишь для демонстрационной цели.

Второй контейнер имеет значение flex-start свойства align-content, это значение определяет, что строки внутри флекс контейнера располагаются в начале поперечной оси.

Третий контейнер имеет значение flex-end свойства align-content, это значение определяет, что строки внутри флекс контейнера располагаются с конца поперечной оси.

Четвертый контейнер имеет значение center свойства align-content, это значение определяет, что строки внутри флекс контейнера располагаются по центру контейнера.

Пятый контейнер имеет значение space-between свойства align-content, это значение определяет, что строки внутри флекс контейнера равномерно распределяются, при этом первая строка позиционируются в начале поперечной оси, а последняя строка позиционируется с конца поперечной оси.

Шестой контейнер имеет значение space-around свойства align-content, это значение определяет, что строки внутри флекс контейнера равномерно распределяются, при этом пространство между двумя соседними строками одинаково, а пустое пространство перед первой строкой и после последней строки равно половине от пространства между соседними строками.

Результат нашего примера:

В настоящее время добавлена поддержка значения space-evenly свойства align-content, которое позволяет разместить четный промежуток между каждой строкой, включая верхний и нижний край контейнера:

Выравнивание по высоте строки

CSS свойство align-items определяет выравнивание элементов внутри флекс контейнера вдоль поперечной оси. Действие свойства align-items похоже на свойство justify-content, но в отличие от него выравнивание происходит не по главной оси, а вдоль поперечной оси (перпендикулярно главной оси).

Схематичное отображение работы свойства align-items отображено на следующем изображении:

Рис. 215 Схематичное отображение работы CSS свойства align-items

Перейдем к рассмотрению следующего примера:

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства align-items</title>
<style> 
.container,
.container2,
.container3,
.container4,
.container5 {   
	display: flex; /* блочные флекс контейнеры */
	height: 200px; /* высота контейнера */
	background: rgba(0,0,0,.4); /* цвет заднего фона */
}
div > div:nth-of-type(1) { /* выбираем первый <div> в каждом контейнере */ 
	background: orange; /* цвет заднего фона */
	font-size: 30px; /* размер шрифта */
}
div > div:nth-of-type(2) { /* выбираем второй <div> в каждом контейнере */ 
	background: tan; /* цвет заднего фона */
	font-size: 20px; /* размер шрифта */
	} 
div > div:nth-of-type(3) { /* выбираем третий <div> в каждом контейнере */ 
	background: rgb(0,150,208); /* цвет заднего фона */
	font-size: 15px; /* размер шрифта */
} 
div > div:nth-of-type(4) { /* выбираем четвертый <div> в каждом контейнере */ 
	background: blue; /* цвет заднего фона */
	font-size: 10px; /* размер шрифта */
} 
div > div:nth-of-type(5) { /* выбираем пятый <div> в каждом контейнере */ 
	background: lime; /* цвет заднего фона */
	font-size: 40px; /* размер шрифта */
} 
div > div {
	width: 20%; /* ширина элемента */
	color: #fff; /* цвет текста */
	margin: 1px; /* внешние отступы со всех сторон */
}
.container {       
	align-items: stretch; /* флекс элементы растягиваются по размеру контейнера вдоль поперечной оси */
}
.container2 {       
	align-items: flex-start; /* флекс элементы располагаются в начале контейнера (начало поперечной оси) */
}
.container3 {       
	align-items: flex-end; /* флекс элементы располагаются в конце контейнера (конец поперечной оси) */
}
.container4 {       
	align-items: center; /* флекс элементы располагаются по центру контейнера (середина поперечной оси) */
}
.container5 {       
	align-items: baseline; /* флекс элементы распологаются по их базовой линии */
}
</style>
</head>
	<body>
		<h4>align-items: stretch;</h4>
		<div class = "container"> <!-- блочный флекс контейнер -->
			<div>1. Some text</div><div>2. Some text</div><div>3. Some text</div> <!-- дочерние флекс элементы -->
			<div>4. Some text</div><div>5. Some text</div> <!-- дочерние флекс элементы -->
		</div>
		<h4>align-items: flex-start;</h4>
		<div class = "container2"> <!-- блочный флекс контейнер -->
			<div>1. Some text</div><div>2. Some text</div><div>3. Some text</div> <!-- дочерние флекс элементы -->
			<div>4. Some text</div><div>5. Some text</div> <!-- дочерние флекс элементы -->
		</div>
		<h4>align-items: flex-end;</h4>
		<div class = "container3"> <!-- блочный флекс контейнер -->
			<div>1. Some text</div><div>2. Some text</div><div>3. Some text</div> <!-- дочерние флекс элементы -->
			<div>4. Some text</div><div>5. Some text</div> <!-- дочерние флекс элементы -->
		</div>
		<h4>align-items: center;</h4>
		<div class = "container4"> <!-- блочный флекс контейнер -->
			<div>1. Some text</div><div>2. Some text</div><div>3. Some text</div> <!-- дочерние флекс элементы -->
			<div>4. Some text</div><div>5. Some text</div> <!-- дочерние флекс элементы -->
		</div>
		<h4>align-items: baseline;</h4>
		<div class = "container5"> <!-- блочный флекс контейнер -->
			<div>1. Some text</div><div>2. Some text</div><div>3. Some text</div> <!-- дочерние флекс элементы -->
			<div>4. Some text</div><div>5. Some text</div> <!-- дочерние флекс элементы -->
		</div>
	</body>
</html>

В этом примере мы разместили пять блочных флекс контейнеров, внутри них мы разместили по пять элементов <div>, которым задали ширину равную 20% от ширины родительского элемента. С использованием псевдокласса :nth-of-type() указали различный цвет заднего фона и различный размер шрифта каждому элементу <div> внутри флекс контейнеров в зависимости от его порядкового номера.

Первый контейнер имеет значение stretch свойства align-items, это значение определяет, что флекс элементы растягиваются по размеру контейнера вдоль поперечной оси. Это значение по умолчанию и указано лишь для демонстрационной цели.

Второй контейнер имеет значение flex-start свойства align-items, это значение определяет, что флекс элементы располагаются в начале контейнера (начало поперечной оси).

Третий контейнер имеет значение flex-end свойства align-items, это значение определяет, что флекс элементы располагаются в конце контейнера (конец поперечной оси).

Четвертый контейнер имеет значение center свойства align-items, это значение определяет, что флекс элементы располагаются по центру контейнера (середина поперечной оси).

Пятый контейнер имеет значение baseline свойства align-items, это значение определяет, что флекс элементы распологаются по их базовой линии.

Результат нашего примера:

Табличная верстка с flexbox — CodeRoad

Я пытаюсь создать таблицу, подобную макету в flexbox, и это не работает.

Я хочу что-то вроде этого:

< image > | < image > 

Text      | Text   

Вместо этого я получаю:

< image > Text | < image > Text

#container {
  display: flex;
  align-items: center;
  justify-content: center;
}
#item {
  flex-direction: row;
  font-family: Georgia, serif;
  font-size: 200%;
  font-weight: bold;
}

<div>
  <div><img src="img/3dsteak.png" />Steak</div>
  <div><img src="img/burger.png" />Burger</div>
</div>

#container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
#item {
  display: flex;
  flex-direction: column;
  font-family: Georgia, serif;
  font-size: 200%;
  font-weight: bold;
  margin: 10px;
}

<div>
    <div>
        <img src="https://placekitten.com/100/100">
        <span>Steak</span>
    </div>
    <div>
        <img src="https://placekitten.com/100/100">
        <span>Burger</span>
    </div>
 </div>

body {
  margin:0
}
#main_background {
  background: url(../img/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#container {
  /*width: 100%;
  height: 100%;*/
  display: flex;
  align-items: center;
  justify-content: center;
}
#item {
  -webkit-flex-direction: row; /* Safari */
  flex-flow:  row wrap;
  font-family: Georgia, serif;
  font-size: 200%  ;
  font-weight: bold;
  margin-right:10px;
  display:flex;
  justify-content:center;

}
img {
  width:100%;
  margin-right:10px;
  height:150px
}
img:last-child {
  margin-right:0
}

<div>
  <div> 
    <img src="https://pbs.twimg.com/profile_images/668243842185973760/n15no_UF.jpg"/>
    <div>
      Steak
    </div>
  </div>
  <div> 
    <img src="https://pbs.twimg.com/profile_images/668243842185973760/n15no_UF.jpg"/>
    <div>
      Steak
    </div>
  </div>
</div>

#main_background {
  background: url(../img/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#container {
  /*width: 100%;
  height: 100%;*/
  display: flex;
  align-items: center;
  justify-content: center;
}
#item {
  margin:10px;
  -webkit-flex-direction: row; /* Safari */
  flex-direction:  row;
  font-family: Georgia, serif;
  font-size: 200%  ;
  font-weight: bold;
}

<div>
  <div> <img src="img/3dsteak.png"/><br /> Steak </div>
  <div> <img src="img/burger.png"/><br /> Burger </div>
</div>

<div class="flex-container">
    <div class="box box-1">Item 1</div>
    <div class="box box-2">Item 2</div> 
    <div class="box box-3">Item 3</div> 
    <div class="box box-4">Item 4</div> 
</div>

.flex-container {
    display: flex;
}

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

flex-start;
flex-end;
center;
space-between;
space-around.

flex-start;
flex-end;
center;
stretch;
baseline;

.flex-container {
  display: flex;
  min-height:100px;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}

.box-1 {
  width:50px;  
}
.box-2 {
  width:70px;
}
.box-3 {
  align-self:center;
  width:90px;
}
.box-4 {
  align-self:flex-end;
}

<div class="flex-container">
  <div class="box box-1">Item 1</div>
  <div class="box box-2">Item 2</div> 
  <div class="box box-3">Item 3</div> 
  <div class="box box-4">Item 4</div> 
</div>



.box-1 {
  flex-grow: 1;
}
.box-2 {
  flex-grow: 2;
}
.box-3 {
  flex-grow: 3;
}
.box-4 {
  flex-grow: 4;
}

.item {
  flex-shrink: <number>; /* по умолчанию 1 */
}

Chrome - 21+
Safari - 3.1+
Firefox - 22+
Opera - 12.1+
IE - 11
Edge
Android - 2.1+
iOS - 3.2+

.flex-container {
    display: flex; /* контейнер как блочный элемент */
}
.flex-container {
     display: inline-flex; /* контейнер как строчный элемент */
}

<section>
    <div>Lorem ipsum</div>
    <div>Lorem ipsum dolor sit amet</div>
    <div>Lorem ipsum</div>
    <div>Lorem ipsum dolor sit amet</div>
    <div>Lorem ipsum</div>
</section>

section {
    display: flex;
    padding: 10px;
    background: #eee;
    width: 800px;
    height: 300px;
}
    section > div {
        box-sizing: border-box;
        padding: 10px;
        color: #fff;
    }
    section > div:nth-child(odd) {
        background: #9f9;
    }
    section > div:nth-child(even) {
        background: #f99;
    }

.flex-container {
    display: flex;
    flex-direction: row; /* по умолчанию — row (вправо) */
}

.flex-container {
    display: flex;
    flex-wrap: wrap; /* по умолчанию — nowrap, перенос запрещен */
}

.flex-container {
    display: flex;
    flex-flow: row wrap;
}

.flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start; /* по умолчанию — flex-start, относительно начала оси */
}

.flex-container {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch; /* по умолчанию — stretch, растягиваются по всей длине поперечной оси */
}

.flex-container {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
}
    .flex-container > div:last-child {
        align-self: flex-end;
    }

.flex-container {
    display: flex;
    flex-flow: row wrap;
    align-content: stretch; /* по умолчанию — stretch, растягиваются по всей длине поперечной оси */
}

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

.flex-container {
    display: flex;
}
/* переместим 2-ой элемент в конец */
#flex-element-2 {
    order: 1;
} 
/* переместим 4-ый элемент в начало */
#flex-element-4 {
    order: -1;
}

<div>
    <div>1</div>
    <div>2</div>   
</div>

.flex-container {
    display: flex;
    width: 600px;
}
    .flex-container > div {
        flex-basis: 30%;
    }

    .flex-container > div:first-child {
        flex-grow: 1;
    } 
    .flex-container > div:last-child {
        flex-grow: 4;
    }

<div>
    <div>1</div>
    <div>2</div>   
</div>

.flex-container {
    display: flex;
    width: 400px;
}
    .flex-container > div {
        flex-basis: 300px;
        flex-shrink: 0; /* запрет на уменьшение ширины */
    }

    .flex-container > div:first-child {
        flex-shrink: 1;
    } 
    .flex-container > div:last-child {
        flex-shrink: 3;
    }

.flex-element {
    flex: 0 1 auto; /* flex-grow: 0; flex-shrink: 1; flex-basis: auto; */
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Макет Flexbox</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <header>
            <p>Header</p>
        </header>
        <main>
            <article>
                <h2>Lorem Ipsum</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</p>
            </article>
            <nav>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
            </nav>
            <aside>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
            </aside>
        </main>
        <footer>
            <p>Footer</p>
        </footer>
    </body>
</html>

/* Верстка по принципу mobile first, для больших экранов медиа-запрос */

* {
    box-sizing: border-box;
}
html, body {
    padding: 0;
    margin: 0;
}

body {
    /* flex-контейнер для <header>, <main> и <footer> */
    display: flex;
    /* flex-элементы <header>, <main> и <footer> выстаиваются по вертикали */
    flex-direction: column;
    /* вся высота viewport браузера */
    min-height: 100vh;
}
    header {
        /* не может увеличиваться или уменьшаться, всегда 100px */
        flex: 0 0 100px;
    }
    main {
        /*
        может как увеличиваться, так и уменьшаться, чтобы вместе с
        <header> и <footer> занять всю высоту viewport браузера
        */
        flex: 1 1 auto;
        /* flex-контейнер для <article>, <nav> и <aside> */
        display: flex;
        /*
        на маленьких экранах flex-элементы <article>, <nav> и <aside> выстаиваются
        по вертикали; для больших экранов отдельный media-запрос
        */
        flex-direction: column;
    }
        article {
            /* базовый размер 50%, может увеличиваться или уменьшаться */
            flex: 2 2 50%;
        }
        nav, aside {
            /* базовый размер 25%, могут увеличиваться или уменьшаться */
            flex: 1 1 25%;
        }
        nav {
            /* будет первым, хотя в html-коде идет вторым */
            order: -1;
        }
    footer {
        /* не может увеличиваться или уменьшаться, всегда 100px */
        flex: 0 0 100px;
    }

@media screen and (min-width: 800px) { /* медиа-запрос для больших экранов */
    main {
        /* на больших экранах <article>, <nav> и <aside> выстаиваются по горизонтали */
        flex-direction: row;
    }
        article {
            /* отступ слева и справа, чтобы отделить левую и правую колонки */
            padding: 0 1em 0 1em;
        }
}

  ul {
  дисплей: гибкий;
  flex-wrap: обертка;
}

li {
  высота: 40vh;
  flex-grow: 1;
}

img {
  максимальная высота: 100%;
  минимальная ширина: 100%;
  объект подходит: крышка;
  вертикальное выравнивание: снизу;
}  

  li: last-child {
  flex-grow: 10;
}  

  @media (максимальное соотношение сторон: 1/1) {
  li {
    высота: 30vh;
  }
}  

  @media (max-height: 480 пикселей) {
  li {
    высота: 80vh;
  }
}  

  @media (max-aspect-ratio: 1/1) и (max-width: 480px) {
  ul {
    flex-direction: ряд;
  }

  li {
    высота: авто;
    ширина: 100%;
  }

  img {
    ширина: 100%;
    макс-высота: 75vh;
    минимальная ширина: 0;
  }
}  

  нг сгенерировать компонент angular-flex-layout
  

  


  <карта> 1. Одна 
  <карта> 2. Два 
  <карта> 3. Три 


  

  .child-1 {
цвет фона: оранжевый;
}
.child-2 {
цвет фона: желтый;
}
.child-3 {
цвет фона: зеленый;
}

.контейнер{
 маржа: 15 пикселей;
 высота: 200 пикселей;
 граница: 2 пикселя сплошной красный;
}
  

  


<карта> 1. Одна 
<карта> 2. Два 
<карта> 3. Три 


  

  


<карта> 1. Одна 
<карта> 2. Два 
<карта> 3.Три 


  

  
 
 npx @ angular / cli новый пример angular-flex --style = css --routing = false --skip-tests
 
 
  

  
 
 npm install @ angular / flex-layout @ 10.0.0-beta.32
 
 
  

  импорт {BrowserModule} из '@ angular / platform-browser';
импортировать {NgModule} из '@ angular / core';
импортировать {FlexLayoutModule} из "@ angular / flex-layout";

импортировать {AppComponent} из './app.component ';

@NgModule ({
  объявления: [
    AppComponent
  ],
  импорт: [
    BrowserModule,
    FlexLayoutModule
  ],
  провайдеры: [],
  бутстрап: [AppComponent]
})
экспортный класс AppModule {}
  

  .container {
  маржа: 10 пикселей;
}

.пункт {
  радиус границы: .2em;
  цвет: #ffffff;
  семейство шрифтов: без засечек;
  размер шрифта: 2em;
  заполнение: 4em 1em;
  преобразование текста: прописные буквы;
}

.item-1 {
  цвет фона: # 009169;
}

.item-2 {
  цвет фона: # 55b296;
}

.item-3 {
  цвет фона: # 9fd3c3;
}

.item-4 {
  цвет фона: # e7b013;
}

.item-5 {
  цвет фона: # 073443;
}
  

  

  

    Пункт 1
  
  

    Пункт 2
  
  

    Пункт 3
  



  

    Пункт 4
  
  

    Пункт 5
  

  

  

  

    Пункт 1
  
  

    Пункт 2
  
  

    Пункт 3
  



  

    Пункт 4
  
  

    Пункт 5
  

  

  

  

    Пункт 1
  
  

    Пункт 2
  
  

    Пункт 3
  



  

    Пункт 4
  
  

    Пункт 5
  

  

  

  

    Пункт 1
  
  

    Пункт 2
  
  

    Пункт 3
  



  

    Пункт 4
  
  

    Пункт 5
  

  

  

  

    Пункт 1
  
  

    Пункт 2
  
  

    Пункт 3
  



  

    Пункт 4
  
  

    Пункт 5
  

  

  

  

    Пункт 1
  
  

    Пункт 2
  
  

    Пункт 3
  



  

    Пункт 4
  
  

    Пункт 5
  

  

  fxLayoutAlign = "center center"

fxLayoutAlign = "центральный конец"

  

  ngClass.xs = "some-css-class"
  

  imgSrc.gt-md = "url-to-large-image" imgSrc = "url-to-normal-size-image"
imgSrc.xs = "url-to-very-small-img"
  

 
$ пряжа добавить @ угловой / гибкий макет

$ npm install @ angular / flex-layout

  

  // ...
импортировать {FlexLayoutModule} из '@ angular / flex-layout';
// ...

@NgModule ({
  объявления: [AppComponent],
  импорт: [
    // ...
    FlexLayoutModule // ...
  ],
  провайдеры: [],
  бутстрап: [AppComponent]
})
класс экспорта AppModule {}