Порядок дочерних блоков можно настраивать совершенно произвольно. Свойство box-ordinal-group позволяет определить место каждого отдельного блока.
Листинг 2.49. Настройка позиции отдельных блоков
#parentbox { display: box; box-orient: horizontal;
}
#box-1{
Box-ordinal-group: 2;
#box-2{
Box-ordinal-group: 4;
}
#box-3{
Box-ordinal-group: 3;
}
#box-4{
Box-ordinal-group: 1;
}
Для настройки произвольного порядка отображения блоков это свойство
Необходимо связывать с самими дочерними блоками. В случае повторения порядкового номера соответствующие блоки выводятся в той последовательности, которая определена в структуре HTML (рис. 2.6).
Parentbox
|
Box-4 |
Box-1 |
Box-3 |
Box-2 |
Рис. 2.6. Блоки выстроены в нужном порядке в соответствии с кодом из листинга 2.49
Как уже говорилось, самая важная особенность гибкой блочной модели заключается в возможности эффективно распределять пространство между экранными элементами. Возможны самые разные ситуации, когда доступное пространство приходится делить между дочерними блоками, например: они принадлежат гибкому родительскому блоку, они сами гибкие, и для них не определены конкретные размеры или же ширина родительского блока больше суммы ширины всех его дочерних блоков.
Давайте рассмотрим пример.
Листинг 2.50. Определение фиксированного размера родительского блока и его потомков
#parentbox { display: box;
Box-orient: horizontal; width: 600px;
}
#box-1{
Width: 100px;
}
#box-2{
Width: 100px;
}
#box-3{
Width: 100px;
}
#box-4{
Width: 100px;
}
Добавьте для дочерних блоков какие-нибудь свойства, например фоновый цвет, значение высоты или рамку, для того чтобы они лучше смотрелись и их было проще отличать друг от друга на экране.
В листинге 2.50 размер родительского блока фиксирован и равен 600 пикселам, а размер каждого дочернего блока 100 пикселов. Таким образом, у нас остается 200 пикселов свободного пространства, которое нужно разделить между дочерними блоками.
Распределить свободное пространство можно разными способами. По умолчанию дочерние блоки выводятся в порядке, показанном на рис. 2.7,
слева направо и вплотную друг к другу. Таким образом, в конце остается свободное место. Однако есть и альтернативные варианты, которые мы рассмотрим далее.
Добавить комментарий