До сих пор мы делали то, что в определенном смысле противоречит принципам рассматриваемой модели. Мы не пользовались преимуществами, предлагаемыми гибкими элементами. Свойство box-flex поможет нам исследовать эти возможности.
Свойство box-flex позволяет объявить блок как гибкий или негибкий, что помогает эффективно распределять пространство. По умолчанию блоки считаются негибкими, а значение данного свойства равно 0. Присваивая ему значение 1 или больше, вы объявляете гибкие блоки. Такие блоки растягиваются или сжимаются для заполнения дополнительного пространства. Их размер может меняться как по горизонтали, так и по вертикали — в зависимости от того, какая ориентация была объявлена в свойствах родительского блока.
Распределение пространства зависит также от свойств остальных блоков. Если все дочерние блоки объявлены как гибкие, то размер каждого из них определяется размером родительского блока и значением свойства box-flex. Давайте рассмотрим пример (листинг 2.52, рис. 2.11).
Листинг 2.52. Объявление гибких блоков с помощью свойства box-flex
#parentbox { display: box; box-orient: horizontal; width: 600px;
}
#box-1{
Box-flex: 1;
}
#box-2{
Box-flex: 1;
}
#box-3{
Box-flex: 1;
}
#box-4{
Box-flex: 1;
}
Pa rent box 600px
|
Ьок-1 |
Box-2 |
Box-3 |
Box-4 |
|
Box-flex: 1 |
Box-flex; 1 |
Box-ftex; 1 |
Box-flex: 1 |
Рис. 2.11. Пространство поровну делится между блоками
Размер каждого из блоков рассчитывается так: размер родительского блока умножается на значение свойства box-flex данного дочернего блока, а затем делится на сумму значений свойств box-flex всех дочерних блоков. В примере из листинга 2.52 формула для блока 1 будет выглядеть так: 600 х 1 / 4 = 150. Значение 600 — это размер родительского блока, 1 — значение свойства box-flex блока box-1, а 4 — сумма значений свойств box-flex всех дочерних блоков. Так как в нашем примере у всех дочерних блоков значение свойства box-flex равно 1, их итоговые размеры также равны между собой и составляют 150 пикселов.
Потенциал данного свойства становится очевиден, когда для разных блоков определяются разные значения box-flex, когда гибкие блоки сочетаются с негибкими и когда мы задаем точные размеры гибких блоков.
Листинг 2.53. Неравномерное распределение свободного пространства
#parentbox { display: box; box-orient: horizontal; width: 600px;
}
#box-1{
Box-flex: 2;
}
#box-2{
Box-flex: 1;
}
#box-3{
Box-flex: 1;
}
#box-4{
Box-flex: 1;
}
В листинге 2.53 для блока box-1 мы поменяли значение свойства box-flex — новое значение равно 2. Теперь формула для вычисления размера данного блока выглядит так: 600 х 2 / 5 = 240. Поскольку мы не меняли размер родительского блока, первая составляющая формулы осталась прежней, однако вторая теперь равна 2 (новое значение свойства box-flex для блока box-1). И, разумеется, сумма значений данного свойства всех дочерних блоков теперь равна 5 (2 для box-1 и 1 для трех остальных). Применив ту же формулу для оставшихся дочерних блоков, мы с легкостью определяем их размер: 600 х 1 / 5 = 120.
Сравнивая результаты, мы видим, что теперь пространство распределено по-другому. Доступное пространство было разделено на количество частей, равное сумме значений свойства box-flex всех дочерних блоков (в нашем примере сумма равна 5). После этого получившиеся части распределены между блоками. Блок номер 1 получил две части, а остальные потомки по одной, так как у них значение свойства box-flex равно 1. Результат применения данного метода проиллюстрирован на рис. 2.12. Его основное преимущество состоит в том, что, когда вы добавите новый дочерний блок, не придется пересчитывать все размеры, как в случае, когда они заданы процентными значениями. В гибкой блочной модели размеры пересчитываются автоматически.
Возможны и другие сценарии. Например, когда один из дочерних блоков
По умолчанию негибкий и для него явно задан размер, остальные дочерние блоки делят между собой оставшееся свободным пространство.
Листинг 2.54. Негибкие и гибкие потомки
#parentbox { display: box; box-orient: horizontal; width: 600px;
}
#box-1{
Width: 300px;
}
#box-2{
Box-flex: 1;
#box-3{
Box-flex: 1;
}
#box-4{
Box-flex: 1;
}
Размер первого блока в примере из листинга 2.54 равен 300 пикселам, поэтому оставшееся пространство, которое будет делиться между остальными потомками, также имеет ширину 300 пикселов (600 — 300 = 300). Браузер вычислит размер каждого гибкого блока по формуле, которую мы уже изучили: 300 х 1 / 3 = 100 (рис. 2.13).
Размер может быть задан явно как для одного блока, так и для нескольких. Тем не менее принцип не меняется: между остальными блоками распределяется только свободное пространство.
Кроме того, можно определять гибкие блоки, обладающие конкретными
Размерами (листинг 2.55).
Листинг 2.55. Для гибких блоков заданы предпочтительные размеры
#parentbox { display: box; box-orient: horizontal; width: 600px;
}
#box-1{
Width: 200px; box-flex: 1;
}
#box-2{
Width: 100px; box-flex: 1;
}
#box-3{
Width: 100px; box-flex: 1;
}
#box-4{
Width: 100px; box-flex: 1;
}
В данном случае для каждого блока указана предпочтительная ширина, однако после размещения всех блоков у нас остается еще 100 пикселов свободного пространства. Это свободное место делится между гибкими блоками. Для вычисления доли, которая достанется каждому блоку, используется уже знакомая нам формула: 100 х 1 / 4 = 25. Это означает, что к предпочтительной ширине каждого блока будет добавлено еще 25 пикселов (рис. 2.14).
Добавить комментарий