Свойство box-pack указывает, каким образом в родительском блоке размещаются дочерние блоки и учитывается свободное пространство (листинг 2.51). Данное свойство может принимать четыре значения: start, end, center и justify.
Листинг 2.51. Распределение свободного пространства с помощью свойства box-pack
#parentbox { display: box; box-orient: horizontal; width: 600px; box-pack: center;
}
#box-1{
Width: 100px;
}
#box-2{
Width: 100px;
}
#box-3{
Width: 100px;
}
#box-4{
Width: 100px;
}
Свойство box-pack по-разному влияет на блоки в зависимости от их ориентации. Если блоки ориентированы горизонтально, то свойство box-pack меняет вариант распределения только горизонтального свободного пространства. Точно так же для вертикальных блоков оно определяет, как будет использоваться свободное вертикальное пространство.
Потенциал данного свойства и возможности гибкой блочной модели иллюстрируют рис. 2.8-2.10.
pa rent box 600px
|
Box-1 100рх |
Box-2 100рх |
Bох-3 100рх |
Box-4 100рх |
Рис. 2.8. Распределение свободного пространства со свойством box-pack: center
Parentbox бООрк
|
Box-1 100рх |
Bох-2 100рх |
Box-3 100рх |
Box-4 100рх |
Рис. 2.9. Распределение свободного пространства со свойством
Box-pack: end
Box-pack: justify
Добавить комментарий