Еще одно свойство, помогающее распределять пространство, носит название box-align. Оно работает аналогично box-pack, однако выравнивает блоки в направлении, не совпадающем с ориентацией блоков. Для блоков с вертикальной ориентацией оно определяет позиционирование по горизонтали и наоборот. Данное свойство удобно применять для выравнивания блоков по вертикали — этой возможности очень не хватало разработчикам после того, как повсеместно отказались от таблиц.
#parentbox { display: box; box-orient: horizontal; width: 600px; height: 200px; box-align: center;
}
#box-1{
Height: 100px; box-flex: 1;
}
#box-2{
Height: 100px; box-flex: 1;
}
#box-3{
Height: 100px; box-flex: 1;
}
#box-4{
Height: 100px; box-flex: 1;
}
В листинге 2.56 мы указали точное значение высоты для всех блоков,
Включая родительский. Оставшееся свободное пространство высотой
100 пикселов будет распределяться в соответствии со значением свойства box-align (рис. 2.15).
parentbox height 20Qpx
Free space 50px
Рис. 2.15. Выравнивание по вертикали с помощью свойства box-align
Свойство box-align может принимать следующие значения: start, end, center, baseline и stretch. Последнее значение растягивает блоки по
вертикали, подгоняя размер дочерних блоков под размер свободного пространства (рис. 2.16). Эта характеристика настолько важна, что именно значение stretch выбрано значением по умолчанию. В результате применения данного значения все дочерние блоки автоматически подгоняются под высоту их родительского блока, независимо от того, какая высота задана для них самих.
рис. 2.16. Растягивание дочерних блоков с помощью свойства box-align: stretch
Вы, вероятно, уже обратили внимание на использование этого свойства в нашем шаблоне. Правый столбец, создаваемый элементом <aside>, автоматически растягивается на всю высоту, и для этого не приходится определять специальное свойство или добавлять сценарий. Если бы мы попытались реализовать то же самое в традиционной блочной модели, очень скоро у нас случилась бы истерика от нервного перенапряжения!
Добавить комментарий