Медиа-запросы
Медиа-запросы — это то, что делает возможным создание современных адаптивных веб-страниц, которые одинаково хорошо выглядят на любом экране, будь то десктоп или смартфон. Всё сводится к применению того или иного CSS-правила, в зависимости от размера окна браузера (области просмотра, вьюпорта), настроек браузера или возможностей устройства.
Алгоритм применения стилей следующий:
- Разработчик описывает набор медиа-запросов и CSS-правил внутри них.
- Браузер отслеживает изменение размера вьюпорта.
- Браузер применяет CSS-правила из медиа-запросов подходящих под текущий размер вьюпорта.
То есть медиа-запросы это инструкции вида: «когда страницу открыли на десктопе, я хочу, чтобы цвет текста был красным, а при открытии на телефоне — зелёным».
Синтаксис
Медиа-запрос это специальная CSS-конструкция, объявляемая директивой @media , за которой может следовать тип устройства (media-type) и медиа-функции (media-feature) — выражения проверяющие характеристики устройства (например ширину вьюпорта). Медиа-функция это логическое выражение, которое возвращает истину (верно) или ложь (не верно).
Например, если необходимо сделать фон <body> оранжевым при ширине вьюпорта 900px и шире, необходимо записать следующий медиа-запрос.
Человеческим языком это можно прочитать как: «если страница отображается на экране, ширина которого не менее 900 пикселей, необходимо применить указанное CSS-правило».
Перейдите на страницу примера кликнув в верхнем правом углу редактора по Edit on Codepen и изменяйте ширину области с результатом. Цвет фона <body> будет изменяться в зависимости от ширины вьюпорта, укзанной в медиа-запросах.
Условие проверки может быть настолько сложным или простым, насколько этого требует ситуация. В большинстве случаев достаточно указать медиа-тип устройства (чаще всего screen ), и проверить только ширину вьюпорта.
Медиа-типы
Медиа-тип используется для описания типа устройств на которых может отображаться веб-страница. Всего есть три типа которые поддерживаются всеми современными браузерами.
- all — если не указать тип носителя, по умолчанию будет использовано это значение, которое означает любое устройство.
- print — соответствует принтерам и устройствам, предназначенным для воспроизведения печатного варианта, например веб-браузеру, отображающему документ в режиме «Предварительный просмотр».
- screen — описывает устройства с физическим экраном: смартфоны, планшеты, мониторы, телевизоры и т. д. То есть всё, что не охватывает тип print .
Медиа-функции
Две наиболее часто используемые медиа-функции, которые позволяют определять ширину вьюпорта браузера — min-width и max-width . Указывается минимальная (min-width) или максимальная (max-width) допустимые ширины вьюпорта, при которых применяются правила из медиа-запросов.
Если представить ширину вьюпорта как прямую от 0 до бесконечности, то мы описываем промежуток, на котором необходимо применить какие-то стили.
Размер вьюпорта, при котором вся вёрстка или её отдельные части изменяют свои стили, то есть меняется дизайн называется точкой перелома (breakpoint).
При изменении ширины вьюпорта в примере, до 600px фон <body> будет желтого цвета, а после 900px — зелёного. В промежутке от 601px до 899px — цвет белый, значение указанное по умолчанию, потому что ни один медиа-запрос не подойдёт.
А как описать промежуток, например, от 600px до 900px ? Необходимо использовать логические операторы для составных медиа-функций.
Логические операторы
Медиа-тип и медиа-функции могут быть разделены необязательными логическими операторами not , and и only — значение по умолчанию. Полный синтаксис медиа-запроса выглядит следующим образом.
Оператор and
Оператор and (буквально «И») используется не только между типом носителя и медиа-условием, но и для связывания нескольких медиа-функций с проверками значений.
Такой медиа-запрос выполнится только если веб-страница открыта на экране, а ширина вьюпорта находится в диапазоне от 400px до 800px .
Оператор ,
Оператор , (буквально «ИЛИ») позволяет указать набор выражений, при выполнении хотябы одного из которых, выполнится медиа-запрос.
Например, необходимо применить стили в промежутке до 600px или после 900px .
То есть это просто перечисление набора медиа-запросов при которых должны примениться стили. Это можно записать как два разных медиа-запроса. Но тогда код стилей <body> будет дублироваться.
В будущих редакциях CSS, оператор , будет заменён на оператор or .
Оператор not
Оператор not (буквально «НЕ») позволяет сделать отрицание, то есть отменить медиа-запрос. Ключевое слово not добавляется в начало медиазапроса и применяется ко всему запросу целиком. Используется очень редко, в каких-то специфических случаях.
Например, запишем условие при котором стили должны примениться везде кроме печати.
При использовании оператора not обязательно должен быть указан тип носителя, потому что по умолчанию для него будет установлено значение all и выражение not all будет читаться буквально как «не все», и медиа-запрос не выполнится никогда.
Переопределение стилей
Ничто не мешает браузеру применить более одного медиа-запроса одновременно, если они подходят по условию. Медиа-запросы не добавляют специфичности к селекторам которые они содержат, но порядок правил по-прежнему имеет значение. То есть правила находящиеся в медиа-запросах участвуют в стандартном каскадировании при составлении финальных стилей элемента.
В инструментах разработчика можно наглядно посмотреть как применяются CSS-правила и переопределяется цвет фона элемента <body> .
При этом переопределяются только одинаковые свойства, а не всё правило целиком. Благодаря этому можно делать слоёный пирог из стилей, не дублируя предыдущие, которые подходят и для текущего медиа-запроса.
Так в инструментах разработчика будут выглядеть стили элемента <body> при ширине вьюпорта больше чем 900px .
Медиа запросы в адаптивной верстке
Продолжая осваивать адаптивную верстку, как элемент адаптивного дизайна, решил написать про медиа-запросы или медиазапросы, в оригинале media-queries. Как мы помним из теоретических основ адаптивной верстки и адаптивного дизайна, медиа-запросы это одна из основных концепций данной технологии и без ее глубокого понимания освоить адаптивную верстку просто не получится.
История медиа-запросов началась еще с далекого 2002 года, с правила @media, которое появилось в спецификации CSS2. Тогда это была относительно простая технология, которая позволяла выводить различные стили в зависимости от типа устройства. Со временем технология развивалась, стала более совершенное в CSS2.1, но оценить полную мощь данной технологии веб-разработчики смогли только после выхода спецификации CSS3.
Quote: Медиа-запросы (media-queries) – технология, реализуемая на стороне браузера, позволяющая загружать разные стили в зависимости от типа и характеристик устройства, и позволяющая тем самым влиять на процесс отображения информации.
В CSS3 спецификации в обработке правила @media появилось полноценная работа с размерами устройства и экрана устройства. Именно благодаря этой поддержке появилась возможность делать адаптивные сайты. Рассмотрим медиа-запросы более внимательно.
Структура медиа-запроса
Сначала предлагаю разобрать структуру медиа-запроса:
@media – объявление правила
not – оператор отрицания, используется для отрицании всего последующего выражения
only – оператор позволяет скрыть медиа-запросы от браузеров, которые их не поддерживают
type – тип устройства
logical – логический оператор (и или или) позволяет лучше управлять логикой медиа-запроса
expression – выражение проверяющее характеристики устройства
Отмечу, что я не планирую писать исчерпывающее руководство по media-queries, поэтому остановлюсь на тех моментах, которые позволяют делать адаптивные сайты.
Тип устройства
Параметр type обозначает тип устройства. Он может принимать следующие значения:
All — позволяет применить стили ко всем типам устройств. Print — позволяет применить стили в к устройствам печати, а так же к экрану в разделе предварительный просмотр печати. screen — позволяет применить стили в к устройствам с экраном. Как правило, это компьютеры, планшеты, наладонники, смартфоны. speech — позволяет применить стили в к устройствам синтезаторам речи.
Есть и другие типы, но скорее всего из нового стандарта их уберут. А нам вполне достаточно тех типов, которые мы перечислили.
Оператор only
Важный оператор, который позволяет отсекать старые браузеры. Так как старые браузеры не понимают синтаксис media-queries, то часть стилей, идущая за основным правилом, может быть ими прочитана. Чтобы избежать этого мы используем оператор only, который, прочитанный старым браузером, заставит его проигнорировать все объявление стилей.
Операторы not, or, and
Стандартные операторы. NOT инвертирует логическое значение следующего за ним выражения. OR это стандартное логическое ИЛИ. AND это стандартное логическое И.
Медиа-функции
Медиа-функции набор операторов, позволяющих проверять те или иные технические характеристики и и свойства устройств. Это самая media-queries, элемент позволяющий производить тонкую настройку запроса. Медиа-функции способны проверять следующие параметры:
Ширина (min-width, max-width) – позволяет применить стили в зависимости от ширины видимой части.
Высоты (min-height, max-height) – позволяет применить стили в зависимости от высоты видимой части.
Ширина устройства (min-device-width, max-device-width) – позволяет применить стили в зависимости от ширины устройства.
Высота устройства (min-device-height, max-device-height) – позволяет применить стили в зависимости от высоты устройтва.
Разрешение (min-resolution, max-resolution) – позволяет применить стили в зависимости от разрешения.
Ориентация (orientation) – позволяет применить стили в зависимости от ориентации устройства.
Соотношение ширины и высоты (min-aspect-ratio, max-aspect-ratio) – позволяет применить стили в зависимости от соотношения сторон видимой части.
Соотношение ширины и высоты устройства (min-device-aspect-ratio, max-device-aspect-ratio) – позволяет применить стили в зависимости от соотношения сторон устройства.
Цветность (min-color, max-color) – позволяет применить стили в зависимости от соотношения сторон устройства.
Количество поддерживаемых цветов (min-color-index, max-color-index) – позволяет применить стили в зависимости от количества поддерживаемых цветов.
Монохромность (min-monochrome, max-monochrome) – позволяет применить стили в зависимости от монохромности и количества оттенков серого.
Сетка (grid) – позволяет применить стили в зависимости от поддержки устройством фиксированной сетки.
Медиа-запросы CSS: основы работы
Медиа-запросы – это очень мощный способ настройки стилей в соответствии с такими факторами, как тип используемого устройства, размер области просмотра, плотность пикселей на экране и даже ориентация устройства. Поскольку медиа-запросы существуют уже довольно давно, вы, вероятно, уже знакомы с их основным синтаксисом и использованием. Поэтому в данном мануале мы постараемся кратко и понятно объяснить основы их работы, а также покажем несколько трюков, о которых вы не знали.
Основные медиа-запросы
Медиа-запросы определяются с помощью правила @media, за которым указывается тип и функции медиа. Доступные типы медиа: all, print, screen и speech (если тип не указан, по умолчанию подразумевается all). Одновременно можно использовать несколько типов, в таком случае их разделяют запятыми:
Примечание: Такие типы медиа, как tv или projection, устарели с выходом Media Queries level 4.
Что касается медиа-функций, они определяются в скобках. Вы можете протестировать широкий спектр функций. Некоторые из наиболее популярных — это width, height, aspect-ratio, orientation и resolution. Многие из этих популярных функций являются функциями диапазона, поэтому они также имеют минимальную и максимальную версии (то есть min-width, max-width, min-aspect-ratio, max-aspect-ratio и т.п.)
В следующем простом примере цвет фона по умолчанию — ярко-розовый, но экранные устройства с шириной области просмотра 650 пикселей или меньше вместо него будут отображать цвет rebeccapurple:
Обратите внимание, при указании типа и функции медиа между ними нужно использовать логический оператор and.
Вот еще несколько примеров простых медиа-запросов, которые указывают либо тип медиа, либо медиа-функцию, либо и то, и другое:
Несколько медиа-функций
Вы можете указать несколько медиа-функций, если того требует ваш запрос. Для этого между функциями используется логический оператор and. При использовании and запрос будет выполнен только в том случае, если все функции оцениваются как истинные. Например, очень часто макеты настраиваются на несколько разных диапазонов ширины области просмотра:
Логический оператор or и запятые
Также можно определить несколько запросов и разделить их запятыми. В этом случае запятые действуют как логические операторы or, и запрос становится по сути списком запросов. Медиа-запрос будет применяться, если какой-либо из перечисленных запросов отвечает шаблону.
В следующем примере медиа-запрос будет истинным, если устройство имеет портретную ориентацию или если окно просмотра устройства имеет минимальную ширину 3rem и максимальное соотношение сторон 2/1:
Логический оператор not
Вы можете использовать логический оператор not в начале запроса, чтобы изменить истинность всего запроса. Оператор not полезен для применения стилей, когда определенные условия не выполняются браузером или устройством. В следующем примере медиа-запрос будет применяться, когда основное указывающее устройство не может наводить курсор на элементы:
Примечание: Тип медиа нужно указывать обязательно. Кроме того, not меняет не весь список запросов (запросы, разделенные запятыми), а только один запрос.
Логический оператор only
Логический оператор only особенный – он скрывает весь запрос для старых браузеров. Другими словами, старые браузеры не понимают ключевое слово only, поэтому игнорируют весь медиа-запрос. Иначе ключевое слово only не действует.
Примечание: Как и в случае с оператором not, при использовании only тип носителя является обязательным. Обратите внимание, что устаревшие браузеры, которые не поддерживают Media Queries level 3, сейчас встречаются редко, поэтому в большинстве случаев only можно не использовать.
Дополнения из Media Queries Level 4
В последнем выпуске спецификации Media Queries Level 4 появилось довольно много новых медиа-функций, которые можно протестировать:
- pointer: определяет, есть ли у вас первичное указывающее устройство (none, coarse и fine).
- any-pointer: определяет, доступно ли какое-либо указывающее устройство (none, coarse и fine).
- hover: определяет, может ли основное указывающее устройство наводить курсор на элементы (none или hover).
- any-hover: определяет, может ли любое из доступных указывающих устройств наводиться на элементы (none или hover).
- color-gamut: диапазон доступных цветов (srgb, p3 или rec2020).
- overflow-inline: способ обработки потенциального переполнения на внутренней оси (none, paged, optional-paged или scroll).
- overflow-block: способ обработки потенциального переполнения на оси блока (none, paged, optional-paged или scroll).
- update: частота, с которой может обновляться макет (none, slow или fast).
Медиа-запросы для дисплеев Retina
За последние несколько лет наблюдается распространение устройств с дисплеями с более высокой плотностью пикселей. Определенные аспекты дизайна для устройств с более высокой плотностью пикселей можно определять иначе. К примеру, можно использовать определенную графику с высоким разрешением.
Чтобы добиться этого, используют медиа-функцию с минимальным разрешением со значением 192 dpi. Однако функция resolution поддерживается не всеми браузерами, и для более надежного подхода можно также добавить дополнительную нестандартную функцию -webkit-min-device-pixel-ratio со значением 2:
Проверить поддержку медиа-функции в браузерах можно на Can I Use.
Ниже вы найдете несколько очень полезных ресурсов, связанных с медиа-запросами:
Медиа запросы. Адаптивный веб-дизайн.
Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль, но так же, наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили.
Медиа-запросы – это понятный и простой способ для создания адаптивного макета сайта с помощью CSS.
Такой макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Медиа-запросы ограничивают ширину макета и при достижении этого значения (к примеру за счёт уменьшения окна или при просмотре на устройстве с указанным размером) уже применяется другой стиль.
Типы носителей
Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов носителя выступают следующие устройства
| Тип | Описание |
|---|---|
| all | Все типы. Это значение используется по умолчанию. |
| Печатающие устройства вроде принтера. | |
| screen | Экран монитора. |
| speech | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. |
Синтаксис
Медиа запросы позволяют использовать особые css-стили для конкретных устройств вывода. До появления CSS3 разработчики могли подключать специальные стили для разных устройств только с помощью атрибута media тэга <link>
Все медиа-запроса начинаются с правила @media , после чего следует условие, в котором используются один или несколько типов носителя(если их более одного, то они перечисляются через запятаю) и выражение для проверки характеристик устройства, содержащее логические операторы и медиа-функции. После чего следуют обязательные фигурные скобки, внутри которых пишутся стилевые правила.
Логические операторы
Медиа запросы представляют собой логические выражения, которые могут быть истинными или ложными. Когда html-документ рендерится, браузер определяет тип носителя информации. В самом простом случаи запрос будет истинным, если указанный тип носителя соответствует типу носителя, на котором запущен браузер(при условии что нет проверки на различные характеричтики устройства). В этом случае к указанным в правиле @media селекторам применятся соответствующие css-стили.
А вообще, с помощью логических операторов можно создавать комбинированные медиазапросы, в которых будет проверяться условие на соответсвие нескольким характеристикам устройства.
| Оператор | Описание |
|---|---|
| AND | Логическое И. Указывается для объединения нескольких условий. |
| , (запятая) | Оператор запятая работает по аналогии с логическим оператором or . |
| NOT | Оператор not позволяет сработать медиа запросу в противоположном случае. Если ключевое слово not указывается в начале медиа-запроса, то отрицание применяется ко всему запросу целиком. Если медиа-запрос составлен с использованием оператора запятая, то отрицание будет распространяться только на ту часть, которая идет до запятой. Оператор not имеет низкий приоритет и оценивается в запросе последним. |
| ONLY | Применяется для старых браузеров, которые не поддерживают медиа-запросы. Старые браузеры считают ключевое слово only типом носителя, но поскольку такого типа не существует, то игнорируют весь стиль целиком. Современные браузеры воспринимают запись с only и без него одинаково. |
Медиа-функции(характеристики медианосителя)
К характеристикам медианосителя относятся проверяемые параметры устройства. Значения, которые используются при задании характеристик, являются контрольными точками.
Стиль выполняется в том случае, если запрос возвращает истину, иными словами, указанные условия выполняются.
(min-, max-)width
Проверяет ширину области просмотра. Значения задаются в единицах длины. Обычно для проверки используются минимальные и максимальные значения ширины.
min-width применяет правило если ширина области просмотра больше значения, указанного в запросе, max-width — ширина области просмотра меньше значения, указанного в запросе.
При составлении медиа запросов нужно ориентироваться на так называемые переломные точки дизайна, т.е. такие значения ширины области просмотра, в которых дизайн сайта существенно меняется, например, появляется горизонтальная полоса прокрутки. Чтобы определить эти точки, нужно открыть сайт в браузере и постепенно уменьшать область просмотра.
Чтобы адаптировать дизайн сайта под разные устройства, необходимо задать разные стили для разных разрешений экранов.
orientation
Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).
Альбомная и портретная ориентация устройства
Принимает два значения: (orientation: portrait) и (orientation: landscape) .
Flexible Box Layout Module
CSS Flexible Box Layout Module — это система компоновки элементов.
Модуль Flexbox-лейаута (flexible box — «гибкий блок», на данный момент W3C Candidate Recommendation) ставит задачу предложить более эффективный способ вёрстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и/или динамический (отсюда слово «гибкий»).
Главная задумка flex-вёрстки в наделении контейнера способностью изменять ширину/высоту (и порядок) своих элементов для наилучшего заполнения пространства (в большинстве случаев — для поддержки всех видов дисплеев и размеров экранов). Flex-контейнер растягивает элементы для заполнения свободного места или сжимает их, чтобы предотвратить выход за границы.
Самое важное, flexbox-лейаут не зависит от направления в отличие от обычных лейаутов (блоки, располагащиеся вертикально, и инлайн-элементы, располагающиеся горизонтально).
Спецификация CSS Flexible Box Layout Module (в народе Flexbox) призвана кардинально изменить ситуацию в лучшую сторону при решении огромного количества задач. Flexbox позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.
Преимущество
Основные преимущества flexbox
- Все блоки очень легко делаются “резиновым”, что уже следует из названия “flex” . Элементы могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.
- Благодаря flexbox элементы ведут себя предсказуемо на всех типах устройств и при различных размерах экрана. Модель гибкой разметки имеет преимущества перед блочной разметкой за счет отсутствия плавающих элементов (свойство float ) и отсутствия схлопывания внешних отступов margin .
- Расположение элементов в основном потоке документа не имеет решающего значения. Его можно поменять в CSS. Это особенно важно для некоторых аспектов responsive-верстки.
- Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая все предоставленное место.
- Множество языков в мире используют написание справа налево rtl (right-to-left) , в отличии от привычного нам ltr (left-to-right) . Flexbox адаптирован для этого. В нем есть понятие начала и конца, а не права и лева. Т.е. в браузерах с локалью rtl все элементы будут автоматически расположены в реверсном порядке.
Поддержка браузерами
Поддержка браузерами пока неполная. Виноват в этом в основном Internet explorer, который поддерживает спецификацию с 10 версии.
| IE -ms- |
Chrome | Opera | Safari | Firefox |
|---|
Концепция
Flexbox — это целый модуль, а не просто единичное свойство, он объединяет в себе множество свойств. Некоторые из них должны применяться к контейнеру (родительскому элементу, так называемому flex-контейнеру), в то время как другие свойства применяются к дочерним элементам, или flex-элементам.
Первое, что нужно сделать – это указать контейнеру display:flex или display:inline-flex .
После установки данных значений свойства, каждый дочерний элемент автоматически становится flex-элементом, выстраиваясь в ряд колонками одинаковой высоты, равной высоте блока-контейнера. При этом блочные и строчные дочерние элементы ведут себя одинаково, т.е. ширина блоков равна ширине их содержимого с учетом внутренних полей и рамок элемента.
В модели flexbox для внутренних блоков не работают такие css-свойства, как float , clear , vertical-align . На flex-контейнер не оказывают влияние свойства column , задающие колонки в тексте.
Flexbox основывается на «направлениях flex-потока». Ознакомьтесь с этой схемой из спецификации, разъясняющей основную идею flex-лейаутов.
Понятие главной и поперечной оси
Одним из основных понятий в fleхbox являются оси.
- Главной осью flex-контейнера является направление, в соответствии с которым располагаются все его дочерние элементы.
- Поперечной осью называется направление, перпендикулярное главной оси.
Главная ось в ltr локали по умолчанию располагается слева направо. Поперечная – сверху вниз.
Свойства flex-контейнера
flex-direction
Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере.
Задание направления главной и поперечной оси
Доступные значения flex-direction :
- row — значение по умолчанию, слева направо (в rtl справа налево). Flex-элементы выкладываются в строку.
- row-reverse — направление справа налево (в rtl слева направо). Flex-элементы выкладываются в строку относительно правого края контейнера (в rtl — левого).
- column — направление сверху вниз. Flex-элементы выкладываются в колонку.
- column-reverse — колонка с элементами в обратном порядке, снизу вверх.
justify-content
Определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера.
Доступные значения justify-content :
- flex-start — (значение по умолчанию) блоки прижаты к началу главной оси.
- flex-end — блоки прижаты к концу главной оси.
- center — блоки располагаются в центре главной оси.
- space-between — блоки выравниваются по главной оси, свободное место между ними распределяется следующим образом: первый блок располагается в начале flex-контейнера, последний блок – в конце, все остальные блоки равномерно распределены в оставшемся пространстве, а свободное пространство равномерно распределяется между элементами.
- space-around — все блоки равномерно распределены вдоль главной оси, разделяя все свободное пространство поровну.
align-items
Свойство align-items определяет, то как будут выравниваться флекс-элементы внутри флекс-контейнера вдоль поперечной оси.
Доступные значения align-items :
- flex-start — блоки прижаты к началу поперечной оси.
- flex-end — блоки прижаты к концу поперечной оси.
- center — блоки располагаются в центре поперечной оси.
- baseline — блоки выравниваются по базовой линии( baseline ).
- stretch — (значение по умолчанию) блоки растягиваются, занимая все пространство по высоте поперечной оси, при этом учитываются min-width/max-width , если таковые заданы.
Оси и выравнивания по ним – это основы flex .
Далее мы поговорим о организации блоков внутри flex-контейнера.
flex-wrap
Все примеры, которые мы приводили выше, были построены с учетом однострочного (одностолбцового) расположения блоков. По умолчанию flex-контейнер всегда будет располагать блоки внутри себя в одну линию. Однако, спецификацией также поддерживается многострочный режим. За многострочность внутри flex-контейнера отвечает CSS свойство flex-wrap .
Свойство flex-wrap указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.
- nowrap — (значение по умолчанию) блоки расположены в одну линию слева направо (в rtl справа налево).
- wrap — блоки переносятся, располагаясь в несколько горизонтальных рядов (если не помещаются в один ряд) в направлении слева направо (в rtl справа налево).
- wrap-reverse — то-же что и wrap , но блоки располагаются в обратном порядке.
flex-flow
Свойство предоставляет возможность в одном свойстве задать направление главной оси и многострочность поперечной оси, т.е. сокращённая запись свойств flex-direction и flex-wrap . Значение по умолчанию flex-flow: row nowrap; .
Первым параметром идёт направление flex-direction — указывает направление главной оси. Значение по умолчанию row .
Следующим параметром идёт многострочность flex-wrap — задаёт многострочность поперечной оси. Значение по умолчанию nowrap .
align-content
Существует также свойство align-content , которое определяет то, каким образом flex-контейнер выравнивает строки на поперечной оси, при наличии свободного места. Свойство работает аналогично тому, как это делает justify-content на главной оси.
Важно: align-content работает только в многострочном режиме (т.е. в случае flex-wrap:wrap; или flex-wrap:wrap-reverse; ) при указании высоты flex-контейнера.
Доступные значения align-content :
- flex-start — ряды блоков прижаты к началу flex-контейнера.
- flex-end — ряды блоков прижаты к концу flex-контейнера.
- center — ряды блоков находятся в центре flex-контейнера.
- space-between — первый ряд блоков располагается в начале flex-контейнера, последний ряд блоков блок – в конце, все остальные ряды равномерно распределены в оставшемся пространстве.
- space-around — ряды блоков равномерно распределяются по высоте, свободное пространство добавляется сверху и снизу строки.
- stretch — (значение по умолчанию) ряды блоков равномерно растягиваются, заполняя все доступное пространство.
СSS свойства flex-wrap и align-content должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.
Свойства для дочерних элементов
flex-basis
Задает изначальный размер по главной оси для flex-блока до того, как к нему будут применены преобразования, основанные на других flex-факторах. Может быть задан в любых единицах измерения длинны (px, em, %, . ) или auto (по умолчанию). Если задан как auto – за основу берутся размеры блока ( width , height ), которые, в свою очередь, могут зависеть от размера контента, если не указанны явно.
flex-grow
Определяет для flex-элемента возможность «вырастать» при необходимости. Принимает безразмерное значение, служащее в качестве пропорции. Оно определяет, какую долю свободного места внутри контейнера элемент может занять.
Если у всех элементов свойство flex-grow задано как 1, то каждый потомок получит внутри контейнера одинаковый размер. Если вы задали одному из потомков значение 2, то он заберёт в два раза больше места, чем другие.
Т.е абсолютное значение flex-grow не определяет точную ширину. Оно определяет его степень “жадности” по отношению к другим flex-блокам того же уровня.
flex-shrink
Свойство указывает коэффициент уменьшения ширины flex-элемента относительно других flex-элементов, внутри flex-контейнера в случае недостатка свободного места, чтобы разместить все элементы в одну строку. По умолчанию коэффициент сжатия флексов в контейнере равен 1.
Работает только если для элемента задана ширина с помощью свойства flex-basis или width.
Короткая запись для свойств flex-grow , flex-shrink и flex-basis
Свойство представляет собой сокращённую запись свойств flex-grow , flex-shrink и flex-basis . Значение по умолчанию: flex: 0 1 auto; . Можно указывать как одно, так и все три значения свойств. Второй и третий параметры ( flex-shrink , flex-basis ) необязательны.
W3C рекомендует использовать сокращённую запись, так как она правильно сбрасывает любые неуказанные компоненты, чтобы подстроиться под типичное использование.
align-self
Свойство отвечает за выравнивание отдельно взятого flex-элемента по высоте flex-контейнера. Переопределяет выравнивание, заданное align-self .
- flex-start — flex-блок прижат к началу поперечной оси.
- flex-end — flex-блок прижат к концу поперечной оси.
- center — flex-блок располагаются в центре поперечной оси.
- baseline — flex-блок выравнен по baseline .
- stretch — (значение по умолчанию) flex-блок растянут, чтобы занять все доступное место по поперечной оси, при этом учитываются min-width/max-width , если таковые заданы.
order
По умолчанию flex-элементы располагаются в исходном порядке. Тем не менее, свойство order может управлять порядком их расположения в контейнере.
Свойство определяет порядок, в котором flex-элементы отображаются внутри flex-контейнера. По умолчанию для всех flex-элементов задан порядок order: 0; и они следуют друг за другом по мере добавления во flex-контейнер. Самый первый flex-элемент по умолчанию расположен слева. Чтобы поставить любой flex-элемент в начало строки, ему нужно назначить order: -1; , в конец строки — order: 1; .
Пример 1
Пример 2
CSS Grid Layout Module Level 1
CSS Grid Layout — является ещё экспериментальной технологией. Задача, которую может решает этот модуль, очень проста и понятна: предоставить удобный механизм расположения контента по виртуальной сетке.
Модуль CSS Grid Layout определяет двумерную сетку оптимизированную для дизайна пользовательского интерфейса. В CSS Grid Layout, дети grid-контейнера могут быть расположены в произвольных местах виртуальной сетки, с заранее определенным гибким или фиксированным размером.
Пример виртаульной сетки
Документ CSS Grid Layout был подготовлен рабочей группой CSS, в качестве Candidate Recommendation(т.е. другими словами — модуль находится ещё на стадии стандартизации). Этот документ призван стать рекомендацией для W3C. Модуль CSS Grid Layout будет оставаться на стадии Candidate Recommendation по крайней мере до 1 мая 2017года для того, чтобы обеспечить возможность для широкого обзора.
В отличие от старых табличных подходов, основанных на использовании тэга <table> , здесь не замусоривается семантика документа, а также есть чёткое разделение структуры документа от содержания. Grid отлично подходит для раскладки элеметов более высокого уровня нежели Flexbox. Он прекрасно подходит для определения общей системы раскладки всей страницы в целом.
Вот только некоторые из возможностей этого модуля:
- легко построить любую сетку, каркас, n-колоночный макет, стандартный набор из шапки, нескольких колонок и подвала, и вообще соорудить макет любой сложности
- проще манипулировать любым grid-элементом: перемещать его в любой столбец/строку сетки, растягивать/сжимать на любую ширину/высоту, а также указывать размеры, составляющие, например, сумму ширин соседних двух grid-элементов
- также grid-элементами можно отдельно управлять в своих столбцах/строках сетки, например, выравнивая их по любой из четырёх сторон, по базовой линии, по середине
- вы знакомы со значением repeat свойства backroud-position для повторения фона изображения; у Grid Layout тоже есть похожее значение, которое позволяет повторять части сетки при её построении
Вообще CSS Grid Layout вводит много новых понятий, которые более детально Вы можете изучить по спецификации. Так же вводится 17 новых свойств, с которыми можно ознокомиться на MDN.
Поддержка браузерами
Как видно из статистики поддержки браузерами, свойства работают только в самых новых версиях браузеров и то не во всех. Что касается IE10+, в нём поддерживается предыдущая версия CSS Grid Layout(от 2011 года) и то только с префиксами. Так что при работе с IE будьте внимательны.
Для старых версий браузров(начиная с Firefox 47 до версии 52; Chrome с версии 49 до 56) есть возможность включить поддержку CSS Grid Layout. Для этого необходимо в Chrome включить параметр «Включить экспериментальные функции веб-платформы» (вкладка chrome://flags), а Firefox включить параметр layout.css.grid.enabled (вкладка about:config).
Основные понятия
CSS Grid – это те же таблицы, однако данный инструмент вводит несколько новых терминов, которые необходимо будет помнить при работе с сетками.
Основные понятия
Единицы измерения fr задаёт размер свободного пространства. Распределение свободного пространства происходит только после того, как все «длины» или размеры строк и столбцов с контентом достигнут максимальных размеров.
Линии(lines)- линии отмечают границы других элементов. Они бывают как горизонтальные, так и вертикальные.
Треки(track) — это пространство между параллельными линиями.
Нумерация линий
Ячейки(cell) — строительные блоки сетки или по другому, это наименьшая единица на сетки.
Области (area) — прямоугольник из произвольного количества ячеек.
display: grid | inline-grid
Для работы с CSS Grid Layout необходимо создать родительский элемент и один или более дочерних.
grid-template-columns
grid-template-rows
Для создания сетки контейнеру необходимо указать свойства display:grid (или display:inline-grid ), а также свойства grid-template-columns и grid-template-rows , которые задают ширина колонок и строк соответственно.
grid-gap
Свойство CSS являющиеся сокращенной формой свойств grid-row-gap и grid-column-gap , указывающие свободное пространство между строк и столбцов сетки grid-контейнера.
min-content
max-content
minmax()
Ещё один из способов определить ширину каждой колонки, это выставить им в качестве значения ключевые слова min-content или max-content . Как можно догадаться из их названия, они определяют размер по минимальному и максимальному содержимому колонки.
Первой колонке выставлено значение min-content , она ужимается по минимальному содержимому (в данном случае это слова «ощущением»), а вторая колонка с max-content , напротив, расширяется по максимуму, чтобы вместить всё содержимое в одну строку (т.е. все слова).
Для более гибкого управления отдельными колонками разработчики спецификации создали функцию minmax(min, max) .
Первое значение функции minmax() представляет минимальный размер колонки, а второе — максимальный.
Именованные линии
Идея именованных линий заключается в удобном и простом механизме для построения сетки при помощи направляющих.
Именованные линии
В примере выше линия «first» идёт в списке значений первой, а значит она располагается на отметке 0px. Значение 200px между ней и следующей линией (content) задает расстояние или интервал между этими линиями, а значит, ширину первой колонки. Тоже самое происходит с остальными линиями и интервалами между ними. Вторая линия (content) находится на отметке 200px, третья (aside) в диапозоне от 400px до (1fr + 200px). Последняя линия (last) находится от 600px до (1fr + 200px + 200px) — сумма ширин всех колонок.
Заметьте в CSS-коде, что первое значение каждого свойства состоит из двух именнованных линий (first nav) и (first header). Это означает, что значение в скобках может содержать любое количество линий, идущих через пробел.
Это может пригодиться для независимого размещения контента по ячейкам сетки, где разные именованные линии на одной отметке упрощают управление блоками grid-контейнера.
Как можно заметить ничего особеного не произошло при добавлении именованых линий, но это пока. Чтобы познать их особеность нужно воспользоваться следующими свойствами.
grid-column-start | grid-column-end
grid-row-start | grid-row-end
Свойства grid-column-start , grid-column-end , grid-row-start , grid-row-end обеспечивают независимое расположение блока по ячекам grid-контейнера, при этом, его положения в общем потоке элементов ни как не вляет.
Внесём небольшие изменения в таблицу стилей.
С помощью именнованных линий можно легко привязать grid-блок(дочерний элемент grid-контейнера) к определённой линии колонки и строки.
grid-template-ares
CSS свойство определяющие название для областей сетки. При помощи этого свойства можно легко стоить сетку grid-контейнера, объеденяя при этом несколько ячеек в одну. Суть его работы лучше всего показать на примере.
Создадим его помощью стандартную трёх колоночную страницу с footer и header.
Свойства grid-template-ares устанавливается grid-контейнеру. В качестве значения принимает шаблон из строк, идущих в кавычках через пробел. Шаблон определает количество строк и колонок в grid-контейнер и описываются области внутри него. Названия строк могут повторяться и включать в точку, указывающую как бы пустую ячейку. Если не указать точку в данном примере — то сетка порвётся.
Для того, чтобы grid-элементам понять, какие ячейки им занимать для каждого из них, нужно указать свойство grid-area .
Повторение колонок и рядов
repeat() — функция введёная в CSS Grid Layout. При помощи этой функции можно создавать повторяющиеся трэки, обладающие определённой закономерностью.