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

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

сОздание мнОгОстОлбцОвых макетОв без Плавающих

ПОлей и ПОзициОнирОвания

Модель гибкого поля представляет собой специальную систему создания много-
столбцовых и многострочных макетов, кардинально отличающуюся от макетов с
плавающими полями и абсолютного позиционирования. Принцип модели гибкого
поля намного удобнее изучать на реальных примерах, поэтому загрузите файлы
упражнений для этой главы с веб-сайта http://www.stunningcss3.com и откройте
файл flex_box_start.html в любом редакторе кода.

Вы увидите ту же самую страницу вымышленной пекарни, с которой мы работали
в главе 6. Правда, я убрала медиазапросы, чтобы немного упростить пример, и из-
бавилась от правил CSS, с помощью которых у нас создавались соседние столбцы. Все
блоки div выстроены вертикально, один над другим, и точно так же по умолчанию
располагаются элементы уровня блока (рис. 7.1). С помощью модели гибкого поля
мы можем сделать так, чтобы они выводились горизонтально.
Первым делом, для того чтобы выстроить блоки горизонтально, нужно присвоить
свойству display соответствующего контейнера значение box — новое значение
CSS3 для старого доброго свойства display. Блок div с именем content — это кон-
тейнер для двух основных столбцов, div-блоков content-main и content-secondary;
обрамляющего блока div на странице из главы 6 не было, но здесь я добавила его,
так как он необходим для реализации модели гибкого поля. Среди стилей внутри
элемента head страницы вставьте новое правило для #content:

#content {
display: -moz-box;
display: -o-box;
display: -webkit-box;
display: box;
}

Когда значение display равно box, блок div превращается в элемент, называемый в
спецификациях W3C гибким полем (flexible box), или зачастую просто полем (box);
кроме того, так вы сообщаете браузеру, что желаете для этого div и его потомков
включить модель гибкого поля. Firefox и браузеры на базе Webkit (единственные
браузеры, поддерживающие в настоящий момент модель гибкого поля) используют
значения -mox-box и -webkit-box, соответственно. Пока что ни один браузер не под-
держивает значение box без префикса, а Opera не распознает даже -o-box, но эти свой-
ства, тем не менее, необходимо добавлять для обеспечения совместимости в будущем.

дополнительные оБрамляющие Блоки dIv
Тот факт, что мне пришлось добавить еще один обрамляющий блок div вокруг div-блоков
content-main и content-secondary, иллюстрирует один из специфических недостатков моде-

www.trk.kg