Свойство box-flex

До сих пор мы делали то, что в определенном смысле противоречит принципам рассматриваемой модели. Мы не пользовались преимуществами, предлагаемыми гибкими элементами. Свойство box-flex позволяет объявить блок как гибкий или негибкий, что помогает эффективно распределять пространство. По умолчанию блоки считаются негибкими, а значение данного свойства равно нулю. Присваивая ему значение 1 или больше, вы объявляете гибкие блоки. Такие блоки растягиваются или сжимаются для заполнения дополнительного пространства. Их размер может меняться как по горизонтали, так и по вертикали – в зависимости от того, какая ориентация была объявлена в свойствах родительского блока.

Распределение пространства также зависит от свойств остальных блоков. Если все дочерние блоки объявлены как гибкие, то размер каждого из них определяется размером родительского блока и значением свойства box-flex.

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

#parentbox {

display: -moz-box;

display: -webkit-box;

-moz-box-orient: horizontal;

-webkit-box-orient: horizontal;

width: 600px;

}

#box-1{

-moz-box-flex: 1 ;

-webkit-box-flex: 1 ;

}

#box-2{

-moz-box-flex: 1 ;

-webkit-box-flex: 1 ;

}

#box-3{

-moz-box-flex: 1 ;

-webkit-box-flex: 1 ;

}

#box-4{

-moz-box-flex: 1 ;

-webkit-box-flex: 1 ;

}

Размер каждого из блоков рассчитывается так: размер родительского блока умножается на значение свойства box-flex данного дочернего блока, а затем делится на сумму значений свойств box-flex всех дочерних элементов. В нашем примере формула для блока 1 будет выглядеть так: 600Х1/4.

Потенциал данного свойства становится очевиден, когда для разных блоков определяются разные значения box-flex, когда гибкие блоки сочетаются с негибкими и когда мы задаем точные размеры гибких блоков.

#parentbox {

display: -moz-box;

display: -webkit-box;

-moz-box-orient: horizontal;

-webkit-box-orient: horizontal;

width: 600px;

}

#box-1{

-moz-box-flex: 2 ;

-webkit-box-flex: 2 ;

}

#box-2{

-moz-box-flex: 1 ;

-webkit-box-flex: 1 ;

}

#box-3{

-moz-box-flex: 1 ;

-webkit-box-flex: 1 ;

}

#box-4{

-moz-box-flex: 1 ;

-webkit-box-flex: 1 ;

}

Теперь формула для вычисления размера блока box-1 выглядит так: 600х2/5=240. Применив ту же формулу ждя остальных дочерних блоков, определяем их размер:

600х1/5=120.

Сравнивая результаты, мы видим, что теперь пространство распределено по-другому. Доступное пространство было разделено на количество частей, равное сумме значений свойства box-flex всех дочерних блоков (в нашем случае 5). После этого получившиеся части распределены между блоками. Блок номер 1 получил две части, а остальные получили по одной, т.к. их box-flex равен 1.

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

#parentbox {

display: -moz-box;

display: -webkit-box;

-moz-box-orient: horizontal;

-webkit-box-orient: horizontal;

width: 600px;

}

#box-1{

width: 300px;

}

#box-2{

-moz-box-flex: 1 ;

-webkit-box-flex: 1 ;

}

#box-3{

-moz-box-flex: 1 ;

-webkit-box-flex: 1 ;

}

#box-4{

-moz-box-flex: 1 ;

-webkit-box-flex: 1 ;

}

Здесь размер первого блока равен 300 px, поэтому оставшееся пространство, которое будет делиться между остальными потомками, равно 600-300=300px. Браузер вычислит размер каждого гибкого блока по нашей формуле: 300х1.3=100.

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

Кроме того, можно объявить гибкими блоки, обладающие конкретными размерами.

#parentbox {

display: -moz-box;

display: -webkit-box;

-moz-box-orient: horizontal;

-webkit-box-orient: horizontal;

width: 600px;

}

#box-1{

width: 200px;

-moz-box-flex: 1 ;

-webkit-box-flex: 1 ;

}

#box-2{

width: 100px;

-moz-box-flex: 1 ;

-webkit-box-flex: 1 ;

}

#box-3{

width: 100px;

-moz-box-flex: 1 ;

-webkit-box-flex: 1 ;

}

#box-4{

width: 100px;

-moz-box-flex: 1 ;

-webkit-box-flex: 1 ;

}

В данном случае для каждого блока указана предпочтительная ширина, однако для размещения всех блоков у нас остается еще 100px свободного пространства. Это свободное место делится между гибкими блоками. Для вычисления доли, которая достанется каждому из блоков, используется уже знакомая нам формула: 100х1/4=25. Это означает, что к предпочтительной ширине каждого блока будет добавлено еще 25px.