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

256 • Глава 7. Вспоминаем навыки верстки

Точно так же все происходит, когда суммарная
Степень увеличения и умень- ширина блоков превышает ширину родитель-
шения ширины блока ограни- ного контейнера: «недостающее» пространство
чивается его максимальной и вычитается из размеров дочерних блоков в про-
минимальной шириной — как порции, установленной значениями box-flex.
внутренней, так и внешней. Из- Например, на рис. 7.6 и 7.7 ширина контейнера
за этого иногда ширина блоков
получается не совсем такой, как уменьшена до 500 пикселов — это меньше, чем
вы ожидали. суммарная ширина его дочерних div-блоков. На
рис. 7.6 у обоих дочерних блоков div значение
box-flex равно 1, и из каждого вычитается по
46 пикселов. На рис. 7.7 для розового div-блока определено значение box-flex: 2,
поэтому он сжимается в два раза сильнее, чем желтый.
Ис
Исходная ширинаходная ширина
Вычтено 46 пикселов

Вычтено чтено
Вы
46 пикселовселов
46 пик
Ис
Исходная ширинаходная ширина
Рис. 7.6. Из обоих div-блоков вычтено по 46 пикселов ширины, для того чтобы
они вдвоем поместились в контейнер шириной 500 пикселов
Исходная ширина
Вычтен 61 пиксел

Вычтен
31 пиксел

Исходная ширина
Рис. 7.7. Из розового div-блока вычтен 61 пиксел, а из желтого — только 31 пиксел,
так как их значения box-flex находятся в отношении 2:1

Давайте сначала попробуем сделать на нашей странице блоки div content-main
и content-secondary одинаково гибкими, присвоив свойству box-flex значение 1
в обоих правилах, #content-main и #content-secondary:
#content-main {
-moz-box-flex: 1;
-o-box-flex: 1;
-webkit-box-flex: 1;

www.trk.kg