Свойство box-direction

Как видно из вышеуказанных примеров, блоки соответствуют нормальному потоку документа и выводятся слева направо по гризонтали и сверху вниз по вертикали. Однако нормальный поток можно поменять на обратный, применив свойство box-direction, которое может принимать следующие значения:

• normal;

• reverse;

• inherit.

Разумеется, значением по умолчанию является normal.

#parentbox

{

display: -moz-box;

display: -webkit-box;

-moz-box-orient: vertical;

-webkit-box-orient: verical;

-moz-box-direction: reverse;

-webkit-box-direction: reverse;

}

Свойство box-ordinal-group

Порядок дочерних блоков можно настраивать совершенно произвольно. Свойство box-ordinal-group позволяет определить место каждого отдельного блока.

#parentbox

{

display: -moz-box;

display: -webkit-box;

-moz-box-orient: horizontal;

-webkit-box-orient: horizontal;

}

#box-1{

-moz-box-ordinal-group:2;

-webkit-box-ordinal-group:2;

box-ordinal-group: 2;

}

#box-2{

-moz-box-ordinal-group:4;

-webkit-box-ordinal-group:4;

box-ordinal-group: 4;

}

#box-3{

-moz-box-ordinal-group:3;

-webkit-box-ordinal-group:3;

box-ordinal-group:3;

}

#box-4{

-moz-box-ordinal-group:1;

-webkit-box-ordinal-group:1;

box-ordinal-group:1;

}

Как мы уже говорили, самая важная особенность гибкой блочной модели заключается в возможности эффетивно распределять пространство между экранными элементами. Возможны самые разные ситуации, когда доступное пространство приходится делить между дочерними блоками, например: они принадлежат гибкому родительскому блоку, они сами гибкие и для них не определены конкретные размеры или же ширина родительского блока больше суммы ширины всех его дочерних блоков.

Рассмотрим пример:

• #parentbox {

• display: -moz-box;

• display: -webkit-box;

• -moz-box-orient: horizontal;

• -webkit-box-orient: horizontal;

• width: 600px;

• }

• #box-1{

• width: 100px;

• }

• #box-2{

• width: 100px;

• }

• #box-3{

• width: 100px;

• }

• #box-4{

• width: 100px;

}

В нашем случае размер родительского блока фиксирован и равен 600 px, а размер каждого дочернего блока - 100 px. Таким образом у нас остается 200 px свободного пространства, которое нужно разделить между дочерними блоками.

Распределить свободное пространство можно разными способами. По умолчанию дочерние блоки выводятся в последовательности, как указано в документе, слева направо и вплотную друг к другу. Таким образом, в конце остантся свободное место. Однако есть и альтернативные варианты, которые мы должны рассмотреть.

Сойство box-pack

Свойство box-pack указывает, каким образом в родительском окне размещаются дочерние блоки и учитывается свободное пространство. Данное свойство может принимать четыре значения:

• start;

• end;

• center;

• justify.

#parentbox {

display: -moz-box;

display: -webkit-box;

-moz-box-orient: horizontal;

-webkit-box-orient: horizontal;

width: 600px;

-moz-box-pack: center;

-webkit-box-pack: center;

}

#box-1{

width: 100px;

}

#box-2{

width: 100px;

}

#box-3{

width: 100px;

}

#box-4{

width: 100px;

}

Свойство box-pack по-разному влияет на блоки в зависимости от их ориентации. Если блоки ориентированы горизонтально, то box-pack меняет вариант распределения только горизонатального свободного пространства. Точно так же для вертикальных блоков оно определяет, как будет использоваться свободное вертикальное пространство.