Как изменить размер флекс элемента

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:

   Она выглядит вот так:

2. Текстовая ссылка:

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   

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

В этом руководстве я покажу вам, как использовать свойства Flexbox для изменения размеров: flex-grow, flex-shrink, flex-basis и flex.

Заполнение свободного пространства

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

Свойства размеров Flexbox позволяют принимать решения в трех видах сценариев:

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

1. Положительное свободное пространство: flex-grow

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

Давайте начнем со следующего HTML:

Класс .container будет нашим flex-контейнером (для него определено display: flex;), а элементы .item будут flex-элементами:

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

Браузер использовал значение по умолчанию flex-grow, которое равно 0. Такое расположение может быть хорошим решением для некоторых макетов, однако, вы можете также сделать так, чтобы элементы занимали все пространство, установив для flex-grow — 1:

Как вы можете видеть ниже, flex-элементы растянулись и заполнили все доступное пространство:

В приведенном выше примере все flex-элементы имеют одинаковое значение flex-grow, поэтому они растягиваются одинаково. Тем не менее, вы также можете заставить их растягиваться в различных соотношениях. Например, .item-1 может занимать вдвое больше доступного пространства, чем другие элементы. Мы зададим это следующим образом:

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

2. Отрицательное свободное пространство: flex-shrink

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

Без flex-shrink следующий CSS даст макет, в котором элементы переполняют контейнер, так как общая ширина элементов (3 * 10rem) больше, чем ширина контейнера (20rem).

Гипотетический случай без flex-shrink.

К счастью для нас, flex-shrink подразумевается по умолчанию, принимая значение 1, что дает нам макет, в котором элементы помещаются в контейнер, даже если им не хватает места:

Когда flex-shrink равно 1, flex-элементы полностью гибкие, а когда не хватает места, они сжимаются вместе с flex-контейнером.

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

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

Тестируя вышеприведенное демо вы могли заметить , что большие значения flex-shrink дают более узкие гибким flex-элементы. Например, следующий CSS дает макет, в котором .item-3 — это самый узкий элемент:

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

3. Нет свободного места: flex-base

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

Свойство flex-basis определяет начальный размер гибких элементов. Значение по умолчанию flex-basis- auto, это означает, что размер flex-элементов рассчитывается с использованием либо элемента width, либо элемента height (в зависимости от того, определяется ли макет на основе строк или столбцов).

Однако когда значение flex-basis отличается от значения auto, оно переопределяет значение width (или height в случае вертикальных макетов). Например, следующий CSS переопределяет правило по умолчанию width: 20rem; соответствующим значением для каждого flex-элемента:

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

Так как flex-basis определяет начальное значение flex-элементов, это база, которую браузер использует для вычисления flex-grow и flex-shrink. Обратите внимание , что в то время как flex-grow и flex-shrink имеют относительные значения ( 0, 1, 2, и т.д.), flex-basis всегда принимает абсолютное значение ( px, rem, content и т.д.).

Сокращения Flex

Свойства размеров Flexbox также называются сокращенно flex. Свойство flex сокращает flex-grow, flex-shrinkи flex-basis следующим образом:

Вам не обязательно перечислять все три значения. Вы можете использовать одно или два значения flex в соответствии со следующими правилами и предположениями:

Может потребоваться некоторое время, чтобы привыкнуть к сокращению flex , но документация W3C фактически рекомендует использовать его вместо записи отдельных свойств: «Авторам рекомендуется контролировать гибкость, используя сокращенную запись flex, а не напрямую с помощью полных свойств, так как сокращение корректно сбрасывает любые неуказанные компоненты для реализации общего использования».

Заключение

Вот и все: вы можете полностью контролировать гибкость с помощью свойств flexbox! В этом руководстве я использовал горизонтальное расположение, установленное flex-direction: row, таким образом распределение пространства происходило по горизонтали (слева направо) и flex-grow, flex-shrink и flex-basis модифицировал ширину flex-элементов.

Если вы примените то, что мы рассмотрели, и к вертикальному макету, установленному с помощью flex-direction: column, модификация будет выполняться вдоль вертикальной (сверху вниз) оси, и свойства размеров будут изменять высоту flex-элементов.

Автор: Anna Monus

Источник: //webdesign.tutsplus.com/

Редакция: Команда webformyself.

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

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

• flex-basis: определяет начальный размер flex-элемента

• flex-shrink: определяет, как flex-элемент будет уменьшаться относительно других flex-элементов во flex-контейнере

• flex-grow: определяет, как flex-элемент будет увеличиваться относительно других flex-элементов во flex-контейнере

flex-basis

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

Это свойство может принимать следующие значения:

• auto: начальный размер flex-элемента устанавливается автоматически

• content: размер flex-элемента определяется по его содержимому, в то же время это значение поддерживается не всеми современными браузерами, поэтому его пока стоит избегать

• числовое значение: мы можем установить конкретное числовое значение для размеров элемента

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			.flex-container {
				display: flex;
				border:1px #ccc solid;
			}
			.flex-item {
				text-align:center;
				font-size: 1em;
				padding: 1.2em;
				color: white;
			}
			.item1 {background-color: #675BA7; flex-basis: auto; width:150px;}
			.item2 {background-color: #9BC850; flex-basis: auto; width:auto;}
			.item3 {background-color: #A62E5C; flex-basis: 200px;width:150px;}
        </style>
    </head>
    <body>
		<div class="flex-container">
			<div class="flex-item item1">Flex Item 1</div>
			<div class="flex-item item2">Flex Item 2</div>
			<div class="flex-item item3">Flex Item 3</div>
		</div>
</html>

У первого элемента у свойства flex-basis установлено значение auto. Поэтому первый элемент в качестве реального значения для ширины будет использовать
значение свойства width.

У второго элемента у свойства flex-basis установлено значение auto, однако и свойство width имеет значение auto. Поэтому реальная ширина элемента будет устанавливаться
по его содержимому.

У третьего элемента свойство flex-basis имеет конкретное значение, которое и используется. А свойство width в этом случае уже не играет никакой роли.

flex-shrink

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

В качестве значения свойство принимает число. По умолчанию его значение 1.

Рассмотрим действие этого свойства на примере:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			.flex-container {
				display: flex;
				border:1px #ccc solid;
				width:400px;
			}
			.flex-item {
				text-align:center;
				font-size: 1em;
				padding: 1.2em;
				color: white;
			}
			.item1 {background-color: #675BA7; flex-basis: 200px; flex-shrink:1;}
			.item2 {background-color: #9BC850; flex-basis: 200px; flex-shrink:2;}
			.item3 {background-color: #A62E5C; flex-basis: 200px; flex-shrink:3;}
        </style>
    </head>
    <body>
		<div class="flex-container">
			<div class="flex-item item1">Flex Item 1</div>
			<div class="flex-item item2">Flex Item 2</div>
			<div class="flex-item item3">Flex Item 3</div>
		</div>
</html>

В данном случае начальная ширина каждого элемента равна 200px, то есть совокупная ширина составляет 600px. Однако ширина flex-контейнера составляет всего
400px. То есть размер контейнера недостаточен для вмещения в него элементов, поэтому в действие вступает свойство flex-shrink, которое определено у элементов.

Для усечения элементов браузер вычисляет коэффициент усечения (shrinkage factor). Он вычисляется путем перемножения значения свойства
flex-basis на flex-shrink. Таким образом, для трех элементов мы получим следующие вычисления:

// первый элемент
200px * 1 = 200
// второй элемент
200px * 2 = 400
// третий элемент
200px * 3 = 600

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

flex-grow

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

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

Итак, используем свойство flex-grow:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			.flex-container {
				display: flex;
				border:1px #ccc solid;
			}
			.flex-item {
				text-align:center;
				font-size: 1em;
				padding: 1.3em;
				color: white;
			}
			.item1 {background-color: #675BA7; flex-grow:0;}
			.item2 {background-color: #9BC850; flex-grow:1;}
			.item3 {background-color: #A62E5C; flex-grow:2;}
        </style>
    </head>
    <body>
		<div class="flex-container">
			<div class="flex-item item1">Flex Item 1</div>
			<div class="flex-item item2">Flex Item 2</div>
			<div class="flex-item item3">Flex Item 3</div>
		</div>
</html>

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

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

Так как у первого элемента свойство flex-grow равно 0, то первый элемент будет иметь константные постоянные размеры.
У второго элемента flex-grow равно 1, а третьего — 2. Таким образом, в сумме они дадут 0 + 1 + 2 = 3. Поэтому второй элемент будет увеличиваться на 1/3 дополнительного пространства, на которое растягивается контейнер, а третий элемент будет получать
2/3 дополнительного пространства.

Свойство flex

Свойство flex является объединением свойств flex-basis, flex-shrink и flex-grow и имеет следующий формальный синтаксис:

flex: [flex-grow] [flex-shrink] [flex-basis]

По умолчанию свойство flex имеет значение 0 1 auto.

Кроме конкретных значений для каждого из подсвойств мы можем задать для свойства flex одно из трех общих значений:

• flex: none: эквивалентно значению 0 0 auto, при котором flex-элемент не растягивается и не усекается при увеличении и уменьшении контейнера

• flex: auto: эквивалентно значению 1 1 auto

• flex: initial: эквивалентно значению 0 1 auto

Так, применим свойство flex:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			.flex-container {
				display: flex;
				border:1px #ccc solid;
				width: 600px;
			}
			.flex-item {
				text-align:center;
				font-size: 16px;
				padding: 10px 0;
				color: white;
			}
			.item1 {background-color: #675BA7; width: 150px; flex: 0 0 auto }
			.item2 {background-color: #9BC850; width: 150px; flex: 1 0 auto;}
			.item3 {background-color: #A62E5C; width: 150px; flex: 0 1 auto;}
			.item4 {background-color: #2A9FBC; width: 150px; flex: 1 1 auto;}
        </style>
    </head>
    <body>
		<div class="flex-container">
			<div class="flex-item item1">Flex Item 1</div>
			<div class="flex-item item2">Flex Item 2</div>
			<div class="flex-item item3">Flex Item 3</div>
			<div class="flex-item item4">Flex Item 4</div>
		</div>
</html>

Здесь каждый элемент имеет начальную ширину в 150 пикселей, так как у всех элементов свойство flex-basis имеет значение 0, что в целом для всех элементов будет составлять 600 пикселей.

При сжатии контейнера будут уменьшаться 3-й и 4-й элементы, так как у них свойство flex-shrink больше нуля. И так как у обоих элементов это свойство равно 1,
то оба элемента будут уменьшаться в равных долях.

При растяжении контейнера будут увеличиваться 2-й и 4-й элементы, так как у этих элементов свойство flex-grow больше нуля. И также, так как это свойство равно 1, то
эти элементы будут увеличиваться в равных долях.

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

flex

Синтаксис:

flex: none;


flex: initial;


flex: 10px;
flex: auto;
flex: content;


flex: 1;




flex: 1 10px;


flex: 1 1;




flex: 1 1 10px;

Пример вёрстки Flexbox:

<style>
.raz {
  display: flex;
  overflow: auto;
  text-align: center;
}
.raz div:nth-child(1) {
  flex: none;
  width: 7em;
  background: yellow;
}
.raz div:nth-child(2) {
  width: 7em;
  background: orange;
}
.raz div:nth-child(3) {
  flex: 1;
  background: red;
}
.raz div:nth-child(4) {
  flex: 2;
  background: purple;
}
</style>

<div class="raz">
  <div>Я всегда буду занимать 7em</div>
  <div>Я буду занимать 7em, но могу поубавить</div>
  <div>Я заполню оставшуюся 1/3</div>
  <div>Я заполню оставшиеся 2/3</div>
</div>

flex-basis: исходный размер flex-элемента

<style>
.raz {
  display: flex;
  background: green;
}
.raz div {
  flex: 0 0 auto;
  min-height: 1.6em;
  background: yellow;
}
</style>

<div class="raz">
  <div></div>
</div>

Если flex-direction имеет значения row или row-reverse, то flex-basis определяет ширину flex-элемента (заменяет свойство width), если column или column-reverse — высоту flex-элемента (заменяет свойство height).

<style>
.raz {
  display: flex;
  flex-direction: row;
  text-align: center;
  background: green;
}
.raz div {
  flex: 0 0 7em; 
  background: yellow;
}
.raz div:nth-child(2) {
  background: orange;
}
</style>

<div class="raz">
  <div>0 0 7em</div>
  <div>0 0 7em</div>
</div>

Свойства width/height игнорируются, если flex-basis не имеет значение auto.

<style>
.raz {
  display: flex;
  text-align: center;
  background: green;
}
.raz div {
  flex: 0 0 auto;
  width: auto;
  background: yellow;
}
</style>

<div class="raz">
  <div>???</div>
</div>

Свойство flex-basis имеет преимущество перед width/height в удобной записи в одну строку в составе свойства flex. При overflow: visible; (по умолчанию) есть отличие при переполнении flex-элемента (искл., IE):

overflow: hidden;

<style>
.raz,
.dva {
  display: flex;
  background: green;
}
.raz div,
.dva div {
  overflow: hidden;
  background: yellow;
}
.raz div {
  flex: 0 0 7em;
}
.dva div {  
  flex: 0 0 auto;
  width: 7em;
}
</style>

<div class="raz">
  <div>????????????????????????????????????????????????</div>
</div>

<div class="dva">
  <div>????????????????????????????????????????????????</div>
</div>

Свойство flex-basis взаимодействует с box-sizing также как width/height в блочной модели:

<style>
.raz,
.dva {
  text-align: center;
  background: green;
}
.raz {
  display: flex;
}
.raz div,
.dva div {
  border: 1em solid SandyBrown;
  padding: 1em;
  box-sizing: content-box;
  background: yellow;
}
.raz div {
  flex: 0 0 7em;
}
.dva div {
  width: 7em;
}
</style>

<div class="raz">
  <div>флекс</div>
</div>

<div class="dva">
  <div>блок</div>
</div>

Как работает свойство flex:

• если сумма размеров всех flex-элементов меньше размера flex-контейнера, то применяется flex-grow.
• если сумма размеров всех flex-элементов равна размеру flex-контейнера, то не применяются ни flex-grow, ни flex-shrink.
• если сумма размеров всех flex-элементов больше размера flex-контейнера, то применяется flex-shrink.

flex-basis:

<style>
.raz {
  display: flex;
  text-align: center;
}
.raz div {
  flex: 3 3 50%; 
  background: yellow;
}
.raz div:nth-child(2) {
  flex: 1 1 50%;
  background: orange;
}
</style>

<div class="raz">
  <div>3 3 50%</div>
  <div>1 1 50%</div>
</div>

flex-grow: доля от поначалу незанятого пространства flex-контейнера, увеличивающая flex-элемент

<style>
.raz {
  display: flex;
}
.raz div {
  min-height: 1.6em;
}
.raz div:nth-child(1) {
  flex: 0 0 auto;
  background: yellow;
}
.raz div:nth-child(2) {
  flex: 1 0 auto;
  background: orange;
}
.raz div:nth-child(3) {
  flex: 1 0 auto;
  background: red;
}
</style>

<div class="raz">
  <div></div>
  <div></div>
  <div></div>
</div>

Если flex-grow имеет значение 0, то flex-элемент не будет увеличиваться в случае недозаполненности flex-контейнера, он будет опираться на значение flex-basis. Иначе flex-элемент увеличится на величину, равную величине поначалу незанятого пространства flex-контейнера.

<style>
.raz,
.dva {
  display: flex;
  background: green;
}
.raz div {
  flex: 0 0 7em;
  background: yellow;
}
.dva div {
  flex: 1 0 7em; 
  background: yellow;
}
</style>

<div class="raz">
  <div>0 0 7em</div>
</div>

<div class="dva">
  <div>1 0 7em</div>
</div>

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

<style>
.raz {
  display: flex;
  text-align: center;
  background: green;
}
.raz div:nth-child(1) {
  flex: 0 0 10%;
  background: yellow;
}
.raz div:nth-child(2) {
  flex: 0 0 20%;
  background: orange;
}
</style>

<div class="raz">
  <div>0 0 10%</div>
  <div>0 0 20%</div>
</div>

flex-shrink: доля от поначалу выходящего за пределы flex-контейнера пространства, уменьшающая flex-элемент

<style>
.raz {
  display: flex;
}
.raz div {
  min-height: 1.6em;
  width: 50%;  
}
.raz div:nth-child(1) {
  flex: 0 1 auto;
  background: yellow;
}
.raz div:nth-child(2) {
  flex: 0 1 auto;
  background: orange;
}
.raz div:nth-child(3) {
  flex: 0 1 auto;
  background: red;
}
</style>

<div class="raz">
  <div></div>
  <div></div>
  <div></div>
</div>

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

<style>
.raz,
.dva {
  display: flex;
  width: 66%; 
  border: solid green;
  background: green;
}
.raz div {
  flex: 0 0 150%;
  background: yellow;
}
.dva div {
  flex: 0 1 150%;
  background: yellow;
}
</style>

<div class="raz">
  <div>0 0 150%</div>
</div>

<div class="dva">
  <div>0 1 150%</div>
</div>

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

<style>
.raz {
  display: flex;
  text-align: center;
  background: green;
}
.raz div:nth-child(1) {
  flex: 0 1 60%;
  background: yellow;
}
.raz div:nth-child(2) {
  flex: 0 1 70%;
  background: orange;
}
</style>

<div class="raz">
  <div>0 0 60%</div>
  <div>0 0 70%</div>
</div>

Flex-элемент не будет ограничен рамками родителя, когда flex-basis/width/height примут значение auto, а flex-shrink/max-width/max-height — 0 (искл., Mozilla Firefox).

<style>
.raz {
  display: flex;
  width: 30%;
  border: solid green;
  background: green;
}
.raz div {
  flex: 0 0 auto;
  background: yellow;
}
</style>

<div class="raz">
  <div>0 0 auto 1 0 auto 2 0 auto 3 0 auto 4 0 auto 5 0 auto 6 0 auto</div>
</div>

Когда длину задаёт flex-basis, а не max-width/max-height/width/height при overflow: visible; (по умолчанию) flex-shrink сожмёт flex-элемент настолько, насколько позволит ему содержимое flex-элемента.

<style>
.raz,
.dva,
.tri,
.chetyre {
  display: flex;
  width: 30%;
  border: solid green;
  background: green;
}
.raz div {
  flex: 0 1 0;  
  background: yellow;
}
.dva div {
  flex: 0 1 auto;
  width: 100%;
  background: yellow;
}
.tri div {
  flex: 0 1 0;
  max-width: 100%;
  background: yellow;
}
.chetyre div {
  flex: 1 1 0;
  overflow: auto;
  background: yellow;
}
</style>

<div class="raz">
  <div>????????????????????????????????????????????????</div>
</div>

<div class="dva">
  <div>????????????????????????????????????????????????</div>
</div>

<div class="tri">
  <div>????????????????????????????????????????????????</div>
</div>

<div class="chetyre">
  <div>????????????????????????????????????????????????</div>
</div>

Распределение пространства flex-контейнера в цифрах

Flex-элементы имеют относительную связь друг с другом

 жёлтый в 1,5 раза больше, чем  оранжевый:
3 : 2 = 1,5

 жёлтый в 3 раза больше, чем  красный
3 : 1 = 3

Как рассчитывается ширина элементов в flex-контейнере:

 flex-grow : (flex-grow + flex-grow + flex-grow) * flex-контейнер = 3 : (3 + 2 + 1) * flex-контейнер = 1/2 flex-контейнер

 flex-grow : (flex-grow + flex-grow + flex-grow) * flex-контейнер = 2 : (3 + 2 + 1) * flex-контейнер = 1/3 flex-контейнер

 flex-grow : (flex-grow + flex-grow + flex-grow) * flex-контейнер = 1 : (3 + 2 + 1) * flex-контейнер = 1/6 flex-контейнер

<style>
.raz {
  display: flex;
  text-align: center;
}
.raz div {
  background: yellow;
  flex: 3 0 0;
}
.raz div:nth-child(2) {
  flex: 2 0 0;
  background: orange;
}
.raz div:nth-child(3) {
  flex: 1 0 0;
  background: red;
}
</style>

<div class="raz">
  <div>3 0 0</div>
  <div>2 0 0</div>
  <div>1 0 0</div>
</div>

Если flex-элементы не заполняют всё пространство flex-контейнера, то сперва определяется свободное пространство в flex-контейнере (flex-контейнер - (flex-basis + flex-basis + flex-basis)), затем оно увеличивает flex-элементы согласно заявленным в flex-grow долям

Как рассчитывается ширина элементов в flex-контейнере:

 flex-grow : (flex-grow + flex-grow + flex-grow) * (flex-контейнер - (flex-basis + flex-basis + flex-basis)) + flex-basis = 3 : (3 + 2 + 2) * (flex-контейнер - (20 + 10 + 70)) + 20 = 3/7 (flex-контейнер - 100) + 20

 flex-grow : (flex-grow + flex-grow + flex-grow) * (flex-контейнер - (flex-basis + flex-basis + flex-basis)) + flex-basis = 2 : (3 + 2 + 2) * (flex-контейнер - (20 + 10 + 70)) + 10 = 2/7 (flex-контейнер - 100) + 10

 flex-grow : (flex-grow + flex-grow + flex-grow) * (flex-контейнер - (flex-basis + flex-basis + flex-basis)) + flex-basis = 2 : (3 + 2 + 2) * (flex-контейнер - (20 + 10 + 70)) + 70 = 2/7 (flex-контейнер - 100) + 70

* сначала выполняется умножение/деление, потом сложение/вычитание: 2+2*2=6

<style>
.raz {
  display: flex;
  text-align: center;
}
.raz div {
  flex: 3 0 20px;
  background: yellow;
}
.raz div:nth-child(2) {
  flex: 2 0 10px;
  background: orange;
}
.raz div:nth-child(3) {
  flex: 2 0 70px;
  background: red;
}
</style>

<div class="raz">
  <div>3 0 20px</div>
  <div>2 0 10px</div>
  <div>2 0 70px</div>
</div>

Ширина/высота flex-элемента не превышает значения свойств max-width/max-height

Как рассчитывается ширина элементов в flex-контейнере:

 flex-grow : (flex-grow + flex-grow) * (flex-контейнер - (flex-basis + flex-basis + max-width)) + flex-basis = 3 : (3 + 2) * (flex-контейнер - (20 + 10 + 100)) + 20 = 3/5 (flex-контейнер - 130) + 20

 flex-grow : (flex-grow + flex-grow) * (flex-контейнер - (flex-basis + flex-basis + max-width)) + flex-basis = 2 : (3 + 2) * (flex-контейнер - (20 + 10 + 100)) + 10 = 2/5 (flex-контейнер - 130) + 10

 max-width = 100

<style>
.raz {
  display: flex;
  text-align: center;
}
.raz div {
  flex: 3 0 20px;
  background: yellow;
}
.raz div:nth-child(2) {
  flex: 2 0 10px;
  background: orange;
}
.raz div:nth-child(3) {
  max-width: 100px;
  flex: 2 0 70px;
  background: red;
}
</style>

<div class="raz">
  <div>3 0 20px</div>
  <div>2 0 10px</div>
  <div>2 0 70px</div>
</div>

Если размера flex-контейнера не хватает для flex-элементов, то сперва определяется сколько требуется пространства (flex-basis + flex-basis + flex-basis - flex-контейнер), затем оно уменьшает flex-элементы согласно заявленным в flex-shrink долям

Как рассчитывается ширина элементов в flex-контейнере:

 flex-basis - flex-shrink * flex-basis : (flex-shrink * flex-basis + flex-shrink * flex-basis + flex-shrink * flex-basis) * (flex-basis + flex-basis + flex-basis - flex-контейнер) = 500 - 3 * 500 : (3 * 500 + 2 * 100 + 2 * 400) * (500 + 100 + 400 - flex-контейнер) = 500 - 15/25 (1000 - flex-контейнер) = 15/25 flex-контейнер - 100

 flex-basis - flex-shrink * flex-basis : (flex-shrink * flex-basis + flex-shrink * flex-basis + flex-shrink * flex-basis) * (flex-basis + flex-basis + flex-basis - flex-контейнер) = 100 - 2 * 100 : (3 * 500 + 2 * 100 + 2 * 400) * (500 + 100 + 400 - flex-контейнер) = 100 - 2/25 (1000 - flex-контейнер) = 2/25 flex-контейнер + 20

 flex-basis - flex-shrink * flex-basis : (flex-shrink * flex-basis + flex-shrink * flex-basis + flex-shrink * flex-basis) * (flex-basis + flex-basis + flex-basis - flex-контейнер) = 400 - 2 * 400 : (3 * 500 + 2 * 100 + 2 * 400) * (500 + 100 + 400 - flex-контейнер) = 400 - 8/25 (1000 - flex-контейнер) = 8/25 flex-контейнер + 80

<style>
.raz {
  display: flex;
  text-align: center;
}
.raz div {
  flex: 0 3 500px;
  background: yellow;
}
.raz div:nth-child(2) {
  flex: 0 2 100px;
  background: orange;
}
.raz div:nth-child(3) {
  flex: 0 2 400px;
  background: red;
}
</style>

<div class="raz">
  <div>3 0 20px</div>
  <div>2 0 10px</div>
  <div>2 0 70px</div>
</div>

Ширина/высота flex-элемента не может быть менее значения свойств min-width/min-height

Как рассчитывается ширина элементов в flex-контейнере:

 flex-basis - flex-shrink * flex-basis : (flex-shrink * flex-basis + flex-shrink * flex-basis) * (flex-basis + flex-basis + min-width - flex-контейнер) = 500 - 3 * 500 : (3 * 500 + 2 * 100) * (500 + 100 + 380 - flex-контейнер) = 500 - 15/17 (980 - flex-контейнер) = 15/17 flex-контейнер - 364

 flex-basis - flex-shrink * flex-basis : (flex-shrink * flex-basis + flex-shrink * flex-basis) * (flex-basis + flex-basis + min-width - flex-контейнер) = 100 - 2 * 100 : (3 * 500 + 2 * 100) * (500 + 100 + 380 - flex-контейнер) = 100 - 2/17 (980 - flex-контейнер) = 2/17 flex-контейнер - 15 

 min-width = 380

<style>
.raz {
  display: flex;
  text-align: center;
}
.raz div {
  flex: 0 3 500px;
  background: yellow;
}
.raz div:nth-child(2) {
  flex: 0 2 100px;
  background: orange;
}
.raz div:nth-child(3) {
  flex: 0 2 400px;
  min-width: 380px;
  background: red;
}
</style>

<div class="raz">
  <div>3 0 20px</div>
  <div>2 0 10px</div>
  <div>2 0 70px</div>
</div>

Используемые материалы:

1. flex [MDN]
2. Flexbox adventures [Chris Coyier]

CSS provides Flexible box layout module, also known as flexbox, which makes it easier to design flexible responsive layout. To start using a flexbox model, we need to first define a flex container and the direct child elements of the container are called flex items.

Flex has following pre-defined properties in order to change the size of the flex items.

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

Syntax:

flex-item: order | flex-grow | flex-shrink | 
           flex-basis | auto | align-self | 
           flex | initial | inherit;

Sample code:

Output:

1. order: This property can be used to specify the order of the flex items.

Example: Below code illustrates the use of flex order.

Output:

2. flex-grow: This property can be used to specify how much an item can grow relative to other items in the container.

Example: Below code illustrates the use of flex-grow property value.

Output:

3. flex-shrink: This property can be used to specify how a much an item can shrink relative to other items in the container. Its default value is 1.

Example: Below code illustrates the use of flex-shrink property value.

Output:

4. flex-basis: This property can be used to specify the initial length of an item in the flex container.

Example: Below code illustrates the use of flex-basis.

Output:

5. flex: This property is a compilation of flex-grow, flex-shrink and flex-basis. You can specify all the three properties within flex.

Example: Below code illustrates the use of flex.

Output:

6. align-self: This property can be used to specify the alignment of the selected element. When defined, it overrides the alignment defined by the container. It takes values: center, flex-start or flex-end. 

Example: Below code illustrates the use of flex align-self property value.

Output: