CSS Flexbox (флексы) — модель верстки, которая делает более удобным решение таких вопросов как:
- Создание всех колонок в макете одинаковой высоты, даже если заполнение у них разное.
- Оформление всех дочерних элементов контейнера таким образом, чтобы они распределили между собой доступную ширину или высоту, в независимости от того, сколько ширины или высоты доступно.
- Вертикальное выравнивание блока внутри родителя.
Для лучшей поддержки свойств этой технологии всеми браузерами можно подсмотреть шпаргалку для использования флексов (display: flex;) в CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
/* Префиксы для flex-контейнера */ .flex-conteiner { display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: -ms-flex; display: -o-flex; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-content: space-around; -ms-flex-line-pack: distribute; align-content: space-around; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } /* Префиксы для flex-элементов */ .flex-item { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-shrink: 3; -ms-flex-negative: 3; flex-shrink: 3; -webkit-flex-basis: 100px; -ms-flex-preferred-size: 100px; flex-basis: 100px; -webkit-box-flex: 1; -webkit-flex: 1 3 400px; -ms-flex: 1 3 400px; flex: 1 3 400px; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; -webkit-box-ordinal-group: 3; -webkit-order: 3; -ms-flex-order: 3; order: 3; } |