Flexbox (флексбокс) предназначен для вёрстки гибких макетов. Ежели свойство display
контейнера принимает значение flex
, его прямые потомки становятся flex-элементами, размером вдоль главной оси которых можно управлять с помощью свойства flex
.
flex
<‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’>
| flex — это сокращённая запись трёх свойств, значения по умолчанию которых:
|
---|---|
none
| 0 0 auto
|
initial
| 0 1 auto
|
inherit
| наследует значение родителя |
unset
| 0 1 auto
|
Синтаксис:
/* одно значение */ /* 0 0 auto */ flex: none; /* 0 1 auto */ flex: initial; /* 1 1<‘flex-basis’>
*/ flex: 10px; flex: auto; flex: content; /*<‘flex-grow’>
1 0 */ flex: 1; /* два значения */ /*<‘flex-grow’>
1<‘flex-basis’>
*/ flex: 1 10px; /*<‘flex-grow’>
<‘flex-shrink’>
0 */ flex: 1 1; /* три значения */ /*<‘flex-grow’>
<‘flex-shrink’>
<‘flex-basis’>
*/ 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-элемента
см. width /height
| ||
не поддерживается браузерами | ||
auto
| ||
наследует значение родителя | ||
auto
|
<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; /* flex-basis у дочерних элементов одинаков */ 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):
<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
.
<style> .raz { display: flex; text-align: center; } .raz div { flex: 3 3 50%; /* flex-basis у дочерних элементов одинаков */ 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-элемент
0
| ||
наследует значение родителя | ||
0
|
<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-элемент
1
| ||
наследует значение родителя | ||
1
|
<style> .raz { display: flex; } .raz div { min-height: 1.6em; width: 50%; /* 50 * 3 = 150% (содержимое flex-контейнера в 1,5 раза больше) */ } .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%; /* flex-контейнер занимает не всю ширину статьи */ 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; /* содержимое flex-контейнера выходит за границы */ 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>
Используемые материалы:
4 комментария:
Выбирайте поле "Имя/URL".