Flexible Box — сговорчивые блоки в CSS3
Flexible Box — новое слово в CSS3, модуль, который позволяет создавать гибкие сетки для веб-страниц. Написав всего несколько правил для родительского элемента, вы можете располагать дочерние блоки в произвольном порядке, выравнивать их по горизонтали и вертикали, увеличивать/уменьшать ширину без использования свойства width и и так далее. Попробуем объяснить возможности Flexbox на 5 конкретных примерах (для создания статьи использованы примеры с этой страницы).
1. Горизонтальный ряд блоков
В этом простом примере блоки внутри контейнера section выстраиваются в ряд без использования правил типа float: left или display: inline-block. Для section мы просто записываем правило display: flex. Теперь все дочерние элементы внутри данного контейнера выстраиваются в ряд без лишних хлопот, им достаточно прописать, если нужно, отступы, цвет фона и т.д. Кстати, свойства float, clear, а также vertical-align для display: flex не работают.
2. Выравнивание блоков по горизонтали
С помощью свойства box-pack (и соответствующих ему специальных свойств для различных браузеров) мы может размещать дочерние блоки по горизонтали внутри родительского контейнера как угодно: ставить их в начало (start), конец (end), центр (center) или даже выравнивать по ширине контейнера (justify) по аналогии с text-align: justify. Принципиальное отличие от выравнивания с помощью float или margin: 0 auto в том, что нам не потребуется дополнительный контейнер для блоков, который обычно двигает какую-либо группу блоков влево и вправо (float: left/right) или может быть помещен в центре с помощью правила margin: 0 auto. А правило box-pack: justify и вовсе не имеет аналогов в традиционной блочной верстке (на момент написания статьи данное значение не работало в Firefox).
3. Выравнивание блоков по вертикали
Свойство box-align позволяет с легкостью манипулировать блоками по вертикали: размещать их в верхней части (start), в середине (center), в «подвале» (end) и по базовой линии контейнера (baseline), а также растягивать их по высоте родителя (stretch). И все это без использования padding, margin, display: table-cell, text-align, vertical-align.
4. Использование свойства flex для увеличения/уменьшения ширины блоков
Контейнеру в данном случае записано правило display: box, а всем дочерним элементам — flex: 1. С помощью селектора nth-child() мы выделяем нужный нам элемент и меняем значения свойства flex, чтобы увеличить его ширину (при этом ширина соседних блоков пропорционально уменьшается). И все это без использования свойства width.
5. Расстановка блоков с помощью свойств box-ordinal-group и flex-order
Теперь чтобы переместить в неизменной html-структуре один из блоков в начало или конец ряда, необязательно использовать Javascript. В современных браузерах с этим вполне справляется CSS3. В данном примере браузер с помощью правила box-ordinal-group: 2 первый элемент (block-1) «переместил» в конец ряда, хотя на самом деле в DOM-структуре block-1 остался на прежнем (первом) месте
