CSS3 представляет новую модель блока — модель гибкого блока, которая определяет, как блок распределяется среди других блоков и как обрабатывается доступное пространство. Это похоже на XUL (язык взаимодействия с пользователем, используемый Firefox), и другие языки также используют ту же блочную модель, например XAML и GladeXML.
Используя эту модель, вы можете легко создать гибкий макет, адаптирующийся к окну браузера, или гибкий макет, адаптирующийся к размеру шрифта. В примерах этой статьи используется следующий HTML-код:
<тело>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</тело>
Традиционная модель блоков размещает блоки вертикально на основе потока HTML. Используя модель flexbox, вы можете указать определенный порядок и изменить его. Чтобы включить гибкую модель блока, просто установите значение атрибута отображения блока с дочерними блоками в значение box (или inline-box).
дисплей: коробка;
Горизонтальное или вертикальное распределение
«box-orient» определяет оси координат распределения: вертикальную и горизонтальную. Эти два значения определяют, как отображается поле.
тело{
дисплей: коробка;
ориентация коробки: горизонтальная;
}
обратное распределение
«box-direction» может установить порядок появления блоков. По умолчанию вам нужно определить только ось распределения — коробки распределяются потоком html. Если это горизонтальная ось, она распределяется слева направо; если это вертикальная ось, она распределяется сверху вниз. Определите значение атрибута «box-direction» как «reverse», чтобы изменить порядок полей.
тело {
дисплей: коробка;
коробчатая ориентация: вертикальная;
направление коробки: обратное;
}
конкретное распределение
Атрибут box-ordinal-group определяет порядок распределения ящиков. Порядок раздачи можно контролировать по желанию. Группы определяются номером, начинающимся с «1», и блочная модель сначала распределяет эти группы, и все эти коробки будут находиться в каждой группе. Распределение будет организовано от мала до велика.
тело {
дисплей: коробка;
коробчатая ориентация: вертикальная;
направление коробки: обратное;
}
#box1 {
группа порядковых номеров: 2;
}
#box2 {
группа порядковых номеров: 2;
}
#box3 {
поле-порядковая группа: 1;
}
