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

Возвращаемся в действительность: что работает сейчас • 285

Для того чтобы включить модель гибкого поля, нужно присвоить свойству display обрам-
ляющего элемента значение box — новое значение, появившееся в CSS3. Для управления
дочерними блоками гибкого поля предназначены разнообразные свойства, перечисленные
в табл. 7.4. Помимо примеров, приведенных в этой главе, модель гибкого поля можно ис-
пользовать для решения следующих задач:
• можно поместить блок самого важного содержимого наверх кода HTML, но выводить
его не в самом начале страницы, а с помощью свойства box-direction или box-ordinal-
group перенести в нужное место;
• перемещение с помощью свойства box-ordinal-group важной записи блога или опи-
сания продукта наверх страницы, даже если соответствующий блок находится далеко
от начала кода HTML;
• растягивание горизонтальной полосы навигации с гибкими кнопками на всю ширину
страницы (используя свойство box-flex);
• создание навигационной полосы, на которой активный элемент (или элемент, к которо-
му подвели указатель мыши) занимает оставшееся свободное пространство, становясь
крупнее соседей (см. http://www.ie7nomore.com/fun/flexiblenav);
• создание галереи изображений с эскизами разной высоты и вертикальной центровкой
в каждой строке;
• создание элементов управления видеопроигрывателем: ползунок занимает все про-
странство, оставшееся после отображения кнопок (см. http://clubajax.org/css3-layouts-
the-flexible-box-model-basics);
• вертикальная центровка изображения рядом с блоком текста, содержащим его опи-
сание.
Большинство из этих примеров пока что невозможно применить на практике, учитывая
низкий уровень поддержки в браузерах и существующие ошибки, но если вы создаете
приложение для определенного браузера, такого как Safari для iOS, то почему бы и не
попробовать!

Таблица 7.3. Поддержка модели гибкого поля в браузерах

IE FIrefox Opera Safari Chrome
Нет Частично, Нет Частично, с префиксом Частично,
с префиксом -moz- -webkit- с префиксом -webkit-

Таблица 7.4. Свойства модели гибкого поля

Свойство Описание
box-orient Вывод блоков вертикально или горизонтально

box-direction Изменение порядка вывода по умолчанию (сверху вниз или слева
направо) на обратный

www.trk.kg