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

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

overflow: auto;
margin: 0 0 20px 0;
}

Теперь нужно внести пару изменений с учетом особенностей Firefox. Добавьте стро-
ку width: 100%, чтобы div-блок растягивался на всю ширину своего контейнера.
Также удалите объявление overflow: auto, чтобы исправить в Firefox ошибку с ис-
чезающим блоком div (подробнее об этом рассказывается во врезке «Исчезающие
поля и блоки»):
#nav-main {
display: -moz-box;
display: -o-box;
display: -webkit-box;
display: box;
-moz-box-pack: center;
-o-box-pack: center;
-webkit-box-pack: center;
box-pack: center;
width: 100%;
margin: 0 0 20px 0;
}

Если теперь сохранить страницу и открыть ее
Завершенная страница, демон- в Firefox, Safari или Chrome, то вы увидите на-
стрирующая все эти эффекты, на- вигационную полосу, выровненную по центру
зывается flex-box_final.html. Она страницы (рис. 7.18). Присвоив свойству box-
сохранена в папке с остальными pack значение center, мы фактически прика-
файлами упражнений для этой зали браузеру взять внутри div-блока nav-main
главы.
пространство, оставшееся пустым, поделить его
поровну и добавить справа и слева от блока ul.

Рис. 7.18. Для горизонтальной центровки навигационной полосы нам понадобилось
присвоить свойству box-pack блока div nav-main значение center

www.trk.kg