Всего за 364.9 руб. Купить полную версию
Размещаемся в нескольких колонках
Часто бывает нужно, чтобы текст или элементы, такие как изображения, охватывали несколько колонок. Это можно достигнуть с помощью свойства column-span. В настоящее время можно все или ничего: вы можете либо охватить все колонки, используя значение all или не охватывать вообще, применяя значение none. Определить точное число охватываемых колонок невозможно. В нашем примере заголовки h3 охватывают полную ширину колонок.
h3 { column-span: all; }
Результат будет выглядеть примерно таким образом, как ниже на рисунке.
Еще одно предостережение в плане многоколонной верстки. Применение этого свойства для длинных кусков текста может привести к тому, что человек, чтобы ему было удобно читать, будет вынужден прокручивать вверх-вниз каждую колонку на странице. Поэтому применяйте это свойство только для коротких отрывков, где длина колонок, возможно, будет меньше, чем окно браузера пользователя. Но когда страница распечатывается, многоколоночная верстка будет удобнее, т. к. размещается на целой странице. Ее хорошо использовать в длинных текстах в таблицах стилей для печати.
Рисунок 4.3. Верхняя колонка как при журнальной верстке. Текстовый блок в верхней части захватывает ширину нескольких колонок в нижней части
Техники верстки/компоновки
Пожалуй, самое сложное на сегодняшний день при работе с CSS – это разметка страницы. Что-то вроде простейшей центровки элемента на странице бывает ужасно сложно сделать. Вы можете поседеть (если не уже), когда верстаете двух– или трехколонный макет с равными по высоте колонками. Эти моменты сводятся к тому, что CSS на самом деле никогда не предоставлял способ разбивки страниц. Годами мы неправильно использовали формат, основанный на свойстве float, но это только один хак. Как таблицы, так и свойство floats, не разрабатывались для разметки страницы. Они создавались для обтекания изображения внутри текстового блока. А когда нам не хватает подходящих инструментов, мы импровизируем. Мы должны быть благодарны скромному свойству float за помощь нам все эти годы. Теперь с CSS3 мы можем попросить float подвинуться, потому что у нас есть новые инструменты для этого. Они из самых многообещающих – создание сетки с помощью тянущихся блоков.
Разметка с помощью тянущихся блоков
Flexible Box Layout (или Flexbox) – это новая блочная модель, оптимизированная под дизайн интерфейса. Дети блока, настроенные для использования модели Flexbox, располагаются вдоль горизонтальных либо вертикальных осей. Их ширина увеличивается или сокращается для того, чтобы заполнять имеющееся пространство на основе назначенной гибкой длины.
Flexbox имеет историческое прошлое. Сначала оно представляло собой свойство для XUL Mozilla (расширенного языка пользовательского интерфейса) и переписывалось тысячи раз. Спецификация только сейчас достигает зрелости, а у нас есть довольно полная поддержка в WebKit и ночных сборках Chrome. Об этом, вне сомнения, полезно знать. Потому что спецификация, возможно, будет реализовываться быстро, если это уже не произошло до того, как вы об этом прочитали. В особенности с быстротой графика релизов Chrome и Firefox.
Пример: Горизонтальная и вертикальная центровка, или Священный Грааль веб-дизайна
Расположить элемент по центру страницы, это, возможно, номер один среди всех запросов веб-дизайнеров. Он, пожалуй, даже превосходит запрос, как положить конец страданиям IE 6. С Flexbox это очень просто.
Начнем с основного шаблона HTML, с заголовка, который мы хотим разместить по центру:
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8"/>
<title>Центровка элемента на странице</title>
</head>
<body>
<h1>OMG, Я в центре</h1>
</body>
</html>
Ничего особенного здесь нет, даже оборачивающего div. Вся магия заключается в CSS:
html {
height: 100 %;
}
body {
display: flexbox; /* это значение нуждается в префиксе */
flex-align: center; /* это свойство также */
flex-pack: center;
margin: 0;
height: 100 %;
}
h1 {
display: flexbox;
flex-align: center;
height: 10rem;
}
Это не совсем весь CSS, что нужен для примера, потому что мы убрали оформительские стили, т. к. вы их наверняка знаете, а мы сэкономим место.
По той же причине мы выбросили префиксы. Только WebKit поддерживает их (префиксом -webkit-), но не удивляйтесь, если в ближайшем будущем это тоже будут делать и Mozilla, и Opera и IE. Лучше добавлять префиксы на всякий случай. Давайте посмотрим на CSS для выравнивания по центру заголовка на странице. Сначала мы устанавливаем элементы html и body на 100 % высоты и убираем любые отступы. Это поможет контейнеру нашего h1 полностью принять высоту окна браузера. Теперь нам просто все нужно расположить по центру.
Включаем FLEXBOX
Так как элемент body содержит заголовок, который мы хотим поставить по центру, мы задаем значение свойства display на flexbox:
body {
display: flexbox;
}
Это заставляет элемент body применять разметку Flexbox вместо обычной блочной. Все его дети в потоке документа (т. е. не абсолютно спозиционированные элементы) становятся элементами Flexbox.
Чего же мы добьемся тем, что наши элементы сделались гибкими, словно от занятий йогой? Они приобретают неслыханную силу: могут изменять свой размер и позицию относительно имеющегося пространства, могут располагаться и вертикально, и горизонтально, и даже могут достичь независимости позиционирования от положения в коде. (Два Священных Грааля в одной спецификации? Да у нас все хорошо!)
Центровка по горизонтали
Идем дальше. Мы хотим расположить наш элемент h1 по центру горизонтально. Раз плюнуть, скажете вы. Да, это, в общем-то, проще, чем "играть" с автоматическими отступами. Всего-то и надо дать команду Flexbox расположить по центру его элементы. По умолчанию элементы Flexbox распределятся горизонтально, поэтому установка свойства flex-pack выровняет элементы вдоль основной оси:
Рисунок 4.4. Простая горизонтальная и вертикальная центровка с использованием Flexbox
body {
display: flexbox;
flex-pack: center;
}
Другие возможные значения – это start (начало), end (конец) и justify (по всей ширине). Значение start выравнивает влево (или вправо, если текст идет справа налево), end выравнивает справа, а justify четко распределяет элементы вдоль оси.
Если вы хотите точно установить ось, вдоль которой выравнивается элемент, то можете сделать это с помощью свойства flex-flow. Стандартная настройка – горизонтальная, она даст нам тот же эффект, которого мы только что добились. Чтобы сделать выравнивание по вертикальной оси, мы можем использовать свойство flex-flow: column. Если мы добавим его в наш пример, вы заметите, что элемент лег по центру вертикально, но мы потеряли горизонтальную центровку. Реверсирование порядка при добавлении -reverse к значениям row или column также возможно (flex-flow: row-reverse или flex-flow: column-reverse), но в нашем примере это мало что значит, так как у нас всего один элемент.