Page 255 - Сила CSS3 Освой новейший стандарт

Создание многостолбцовых макетов без плавающих полей • 255

строку, для того чтобы ширина контейнера не превышала 100%. Таким образом,
ширина div-блоков корректируется с учетом ширины их содержимого. Если сум-
марная внутренняя ширина дочерних блоков оказывается меньше ширины контей-
нера, дочерние блоки расширяются и заполняют свободное пространство. Если же
суммарная ширина дочерних блоков превышает ширину контейнера, они сужаются.
Как сильно div-блоки расширяются (или сужаются), зависит от их внутренней ши-
рины. Это относительное, а не абсолютное значение. Гибкие поля подстраиваются
под размеры друг друга с соблюдением определенных пропорций. Например, блок
со значением box-flex, равным 2, в два раза гибче блока со значением box-flex,
равным 1, поэтому свободное пространство делится между ними в пропорции 2:1.

Для того чтобы понять этот принцип, лучше всего взглянуть на реальный пример.
На рис. 7.3 показано серое поле шириной 800 пикселов, содержащие два негибких
блока div, внутренняя ширина которых не менялась; при такой высоте текста ши-
рина желтого div-блока равна 99 пикселам, а ширина розового div-блока составляет
493 пиксела. Таким образом, внутри поля остается 208 пикселов свободного про-
странства. Если для обоих div-блоков настроить значение box-flex, равное 1, то они
поделят 208 пикселов свободного пространства в пропорции 1:1, т. е. поровну (рис.
7.4). Но если к розовому div-блоку добавить свойство box-flex: 2, то он отхватит
вдвое большую долю свободного пространства, чем желтый div-блок (рис. 7.5).

99 пикселов 493 пиксела 208 свободных пикселов

Рис. 7.3. Размер обоих div-блоков, желтого и розового, определяется длиной их
содержимого, и в обрамляющем контейнере div остается серое свободное
пространство

104 дополнительных пиксела 104 дополнительных пиксела

Рис. 7.4. К обоим div-блокам добавлено по 104 пиксела

69 дополнительных пикселов 139 дополнительных пикселов

Рис. 7.5. Из 208 свободных пикселов розовый div-блок получает 139 пикселов,
а желтый — только 69 пикселов, так как значение box-flex первого блока div
в два раза превышает соответствующее значение второго блока

www.trk.kg