![image](https://habrastorage.org/getpro/habr/post_images/946/afc/fd6/946afcfd613e5c5040ee3d9cb412a218.png)
К сожалению, не у всех есть браузер/устройство, поддерживающие flexbox. Это руководство в виде шпаргалки, в котором предлагаются альтернативы обратной совместимости для свойств flexbox.
Хотя некоторый CSS-код в этом руководстве, возможно, покажется очевидным, я собираюсь бросить вызов flexbox, а также предложить простые решения проблем, которые возникали, пока он не обрёл популярность.
1. flex-direction
row
Отображает элементы горизонтально
.item {
display: inline-block;
}
![image](https://habrastorage.org/getpro/habr/post_images/160/38f/9f6/16038f9f60a8856f673f0bf3cd67123a.png)
Ссылка на живой пример.
row-reverse
Отображает элементы горизонтально в обратном порядке
.container {
direction: rtl;
}
.item {
display: inline-block;
}
![image](https://habrastorage.org/getpro/habr/post_images/7a0/cb7/100/7a0cb7100c172bd97f0669bde6aea308.png)
Ссылка на живой пример.
column
Отображает элементы вертикально
.item {
display: block;
}
![image](https://habrastorage.org/getpro/habr/post_images/c33/c9c/c82/c33c9cc8288fc61f40c6ea810476fc91.png)
Ссылка на живой пример.
column-reverse
Отображает элементы вертикально в обратном порядке
.container, .item {
transform: scaleY(-1);
-ms-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
}
.item {
display: block;
}
![image](https://habrastorage.org/getpro/habr/post_images/493/314/c14/493314c147bca3f797764eeaa4871596.png)
Ссылка на живой пример.
2. flex-wrap
nowrap
Сужает элементы для предотвращения переноса
.container {
display: table;
}
.item {
display: table-cell;
}
![image](https://habrastorage.org/getpro/habr/post_images/f69/d17/015/f69d1701572bbb8594051635b1fbaac5.png)
Ссылка на живой пример.
wrap
Переносит элементы на другую строку, когда их общая ширина больше ширины контейнера
.item {
display: inline-block;
}
![image](https://habrastorage.org/getpro/habr/post_images/207/aad/182/207aad182beb59ca209296ccff6f8477.png)
Ссылка на живой пример.
flex-start
Выравнивает элементы по горизонтали в начале контейнера
.item {
display: inline-block;
}
![image](https://habrastorage.org/getpro/habr/post_images/eb7/6ab/296/eb76ab296f88d782bb067d6fb1a931f2.png)
Ссылка на живой пример.
flex-end
Выравнивает элементы по горизонтали в конце контейнера
.container {
text-align: right;
}
.item {
display: inline-block;
}
![image](https://habrastorage.org/getpro/habr/post_images/e06/81a/b37/e0681ab370aa11cde85524eb81af03ed.png)
Ссылка на живой пример.
center
Выравнивает элементы по горизонтали по центру контейнера
.container {
text-align: center;
}
.item {
display: inline-block;
}
![image](https://habrastorage.org/getpro/habr/post_images/c86/8be/1aa/c868be1aa00a86ee3d2b9954e787f43e.png)
Ссылка на живой пример.
space-between
Распределяет равное пространство между элементами, заставляя крайние элементы прижаться к краям контейнера
.container {
text-align: justify;
}
.container:after {
content: '';
display: inline-block;
width: 100%;
}
.item {
display: inline-block;
}
![image](https://habrastorage.org/getpro/habr/post_images/447/621/5f4/4476215f4a537f9f2b7afe463a1adab2.png)
Ссылка на живой пример.
Примечание: этот метод работает только с несжатым HTML и требует фиксированную высоту у контейнера.
space-around
Равномеро распределяет пространство между элементами
.container {
display: table;
}
.item {
display: table-cell;
text-align: center;
}
![image](https://habrastorage.org/getpro/habr/post_images/dd1/e7e/d80/dd1e7ed80f8438510426a1535580033c.png)
Ссылка на живой пример.
4. align-items
flex-start
Выравнивает элементы по вертикали в начале контейнера
.item {
display: table-cell;
}
![image](https://habrastorage.org/getpro/habr/post_images/250/50a/4e1/25050a4e1ebd7ae832fec328377e63c9.png)
Ссылка на живой пример.
flex-end
Выравнивает элементы по вертикали в конце контейнера
.container {
display: table;
}
.item {
display: table-cell;
vertical-align: bottom;
}
![image](https://habrastorage.org/getpro/habr/post_images/514/3dc/32f/5143dc32f5c1068316230b1d1dc93307.png)
Ссылка на живой пример.
center
Выравнивает элементы по вертикали в центру контейнера
.container {
display: table;
}
.item {
display: table-cell;
vertical-align: middle;
}
![image](https://habrastorage.org/getpro/habr/post_images/650/a9d/fe4/650a9dfe4d22bffac127196ba17e419e.png)
Ссылка на живой пример.
stretch
Растягивает элементы по вертикали от начала до конца контейнера
.item {
display: inline-block;
height: 100%;
}
![image](https://habrastorage.org/getpro/habr/post_images/9dc/810/539/9dc810539b00a3432b7adffde66a0780.png)
Ссылка на живой пример.
5. align-content
flex-start
Выравнивает элементы по вертикали в начале контейнера
.item {
display: inline-block;
}
![image](https://habrastorage.org/getpro/habr/post_images/458/440/096/458440096a0ea232181234dfef8669b2.png)
Ссылка на живой пример.
flex-end
Выравнивает элементы по вертикали в конце контейнера
.container {
display: table-cell;
vertical-align: bottom;
}
.item {
display: inline-block;
}
![image](https://habrastorage.org/getpro/habr/post_images/d99/d13/633/d99d13633f478c28ce05c22396a4cbe1.png)
Ссылка на живой пример.
center
Выравнивает элементы по вертикали по центру контейнера
.container {
display: table-cell;
vertical-align: middle;
}
.item {
display: inline-block;
}
![image](https://habrastorage.org/getpro/habr/post_images/5a3/f1f/80d/5a3f1f80d340fac885a10cf546e5b55f.png)
Ссылка на живой пример.
6. flex items
flex-grow
Растягивает элемент, чтобы заполнить оставшееся пространство
.container {
display: table;
}
.item {
display: table-cell;
}
.item.grow {
width: 100%;
}
![image](https://habrastorage.org/getpro/habr/post_images/65e/34d/c21/65e34dc219b22c20e2a41208040393ae.png)
Ссылка на живой пример.
flex-shrink
Сужает элемент, а другие элементы заполняют оставшееся пространство
.container {
display: table;
}
.item {
display: table-cell;
}
.item.shrink {
width: 1px;
}
![image](https://habrastorage.org/getpro/habr/post_images/63f/043/cd2/63f043cd24ac4632dedbc02316d3f9d6.png)
Ссылка на живой пример.
align-self
Выравнивает элемент по вертикали (внизу в этом примере)
.container {
display: table;
}
.item {
display: table-cell;
}
.item.bottom {
vertical-align: bottom;
}
![image](https://habrastorage.org/getpro/habr/post_images/1e6/769/5ca/1e67695ca5d4b12754e2f47d46033e5d.png)
Ссылка на живой пример.