Основы CSS3

Фильтры (Filters) в CSS3 Размер рамки (box-sizing) в CSS3

Разметка с помощью блока эластичных ячеек (Flexible box layout) в CSS3

CSS3 Flexible Box или flexbox - это новый модель макета, предназначенный для создания более гибких интерфейсов пользователя.

Изучение модели макета Flex

Flexible Box, обычно называемый flexbox, - это новый модель макета, введённый в CSS3, предназначенный для создания гибких интерфейсов пользователя с несколькими строками и колонками, без использования процента или фиксированных значений длины. CSS3 Модель布局 flex предоставляет простую и мощную механику для автоматического управления распределением пространства и выравниванием содержимого через таблицу стилей, не вмешиваясь в фактическую маркировку.

Данный пример демонстрирует, как использовать модель布局 flex для создания трёхколонного макета, где ширина и высота каждой колонки равны.

Пример

<!DOCTYPE　html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Three Equal Flex Column</title>
<style>
　　　　.flex-container {
　　　　　　　　width: 80%;
　　　　　　　　min-height:　300px;
　　　　　　　　display: -webkit-flex; /* Safari */　　　　　
　　　　　　　　display:　flex;　
　　　　　　　　border: 1px solid #808080;
　　　　}
　　　　.flex-container div {
　　　　　　　　background:　#dbdfe5;
　　　　　　　　-webkit-flex: 1; /* Safari */
　　　　　　　　-ms-flex: 1; /* IE 10 */
　　　　　　　　flex: 1;　
　　　　}
</style>
</head>Item 1Item 2Item 3</html>

Проверьте, как это выглядит‹/›

Если вы внимательно изучите пример кода выше, вы заметите, что мы не используем внутри .flex-container<div>Если вы внимательно изучите пример кода выше, вы заметите, что мы не используем внутри .flex-container

Как работает Flex-раскладка

Flexbox состоит из flex контейнера и flex элементов. Вы можете определить ширину в upper, но вы можете увидеть, что ширина каждого столбца точно равна одной трети родителя .flex-container.displayэлементы, у которых свойство display установлено в flex (чтобы создатьблочный Flex контейнер) или inline-flex (чтобы создать аналогичныйinline-blockвнутренний инлайн-контейнер flex (чтобы создать flex контейнер) или inline-flex (чтобы создать аналогичныйfloat,clearиvertical-alignэта свойство не влияет на элементы с эластичными свойствами.

элементы растяжки следуют по этойflex-directionСвойство определяет направленность растяжки в伸缩ном контейнере. По умолчанию у каждого flex контейнера есть только одна линия растяжки, которая направлена в сторону инлайн-оси текущего режима записи илинаправление текста如图所示，将帮助 вам понять терминологию flex-раскладки.

Определение потока внутри flex контейнера

В стандартной модели CSS-бокса элементы обычно отображаются в том порядке, в котором они появляются в底层 HTML-маркере. Flex-раскладка позволяет вам контролировать направление потока в flex контейнере, таким образом, элементы могут быть выложены в любом направлении потока, например, влево, вправо, вниз или вверх.

Вы можете использоватьflex-directionЭта свойство определяет поток flex элементов в flex контейнере. Значением по умолчанию для этой свойства является row, которое совпадает с текущим направлением текста или模式下 записи, например, с английским языком, который пишется слева направо.

Пример

.flex-container {
　　　　width: 80%;
　　　　min-height:　300px;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-direction: row-reverse;
　　　　
　　　　display:　flex;
　　　　flex-direction: row-reverse;
　　　　border:　1px　solid　#666;
}

Проверьте, как это выглядит‹/›

Аналогично, вы можете отображать элементы flex контейнера в виде столбца внутри flex контейнера, а не использовать значение属性 flex-direction столбец, как показано ниже:

Пример

.flex-container {
　　　　width: 80%;
　　　　min-height:　300px;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-direction: column;
　　　　
　　　　display:　flex;
　　　　flex-direction: column;
}

Проверьте, как это выглядит‹/›

контроль размеров элементов Flex

Одним из важнейших аспектов гибкой разметки является способность элементов Flex изменять свою ширину или высоту, чтобы заполнить доступное пространство. Это осуществляется черезflexАтрибуты, реализующие это, являются сокращенными атрибутамиflex-grow,flex-shrinkаflex-basisАтрибут.

Контейнер Flex распределяет доступное пространство между своими элементами пропорционально их коэффициентам роста, или сжимает их, чтобы предотвратить переполнение, пропорционально их коэффициенту сжатия.

Пример

.flex-container {
　　　　width: 80%;
　　　　min-height:　300px;
　　　　display: -webkit-flex; /* Safari */　　　　　
　　　　display:　flex;　
}
.flex-container div {
　　　　padding:　10px;
　　　　background:　#dbdfe5;
}
.item1, .item3 {
　　　　-webkit-flex: 1; /* Safari */
　　　　flex: 1;　
}
.item2 {
　　　　-webkit-flex: 2; /* Safari */
　　　　flex: 2;　
}

Проверьте, как это выглядит‹/›

В приведенном выше примере первый и третий элементы Flex занимают 1/4, то есть 1/(1+1+2) свободного пространства, а второй элемент занимает 1/2, то есть 2/(1+1+2) свободного пространства. Аналогичным образом, вы можете использовать эту простую технику для создания других гибких макетов.

Внимание:Строго рекомендуется использовать атрибуты шорткода, а не отдельные атрибуты flex, так как это позволяет правильно сбросить компоненты, не указанные явно.

Выравнивание элементов Flex в контейнере Flex

Есть четыре属性justify-content,align-content,align-itemsиalign-selfЦелью является указание на выравнивание элементов Flex в контейнере Flex. Первые три параметра применяются к контейнеру flex, а последний - к отдельному элементу flex.

Выравнивание элементов Flex по основной оси

С помощью атрибута justify-content можно выровнять элементы Flex по основной оси контейнера (то есть по горизонтали). Обычно используется, когда элементы Flex не занимают все доступное пространство по оси.

Атрибут justify-content принимает следующие значения:

flex-start-Значение по умолчанию. Элементы Flex размещаются в начале основной оси.
flex-end -Элементы Flex расположены в конце основной оси.
center　　-Элементы Flex расположены в центре между свободным пространством на обоих концах основной оси. Если остается отрицательное свободное пространство, то элементы будут вылезать равномерно в обоих направлениях.
space-between　-Элементы Flex распределены по основной оси, где первый элемент размещается в начале оси, а последний - в конце оси. Если элементы вылезают или есть только один элемент, то это значение равно flex-start.
space-around　-Элементы Flex распределяются равномерно с одинаковым расстоянием на обоих концах. Если они вылезают или есть только один элемент, то это значение равно center.

Данный пример покажет вам, как различные значения атрибута justify-content влияют на многостолбцовый flex-контейнер с фиксированной шириной.

Пример

.flex-container {
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-justify-content:　space-around;
　　　　
　　　　display:　flex;
　　　　justify-content:　space-around;
}
.item1 {
　　　　width:　75px;
　　　　background: #e84d51;
}
.item2 {
　　　　width:　125px;
　　　　background: #7ed636;
}
.item3 {
　　　　width:　175px;
　　　　background: #2f97ff;
}

Проверьте, как это выглядит‹/›

Выравнивание эластичных элементов по горизонтали

Вы можете использовать атрибуты align-items или align-self для выравнивания эластичных элементов по горизонтали flex-контейнера (то есть по вертикальной оси). Однако, когда вы применяете align-items к flex-контейнеру, атрибут align-self применяется к отдельному эластичному элементу и перекрывает align-items. Оба атрибута принимают следующие значения:

flex-start -Эластичные элементы расположены на начале оси пересечения.
flex-end -Эластичные элементы расположены на конце оси пересечения.
center　-Эластичные элементы размещаются в центре оси горизонтали, с равным доступным пространством с обеих сторон. Если оставшееся свободное пространство отрицательно, то эластичные элементы будут равномерно переливаться в обе стороны.
baseline　-Текстовая база каждого эластичного элемента (или инлайн-оси) выравнивается с базовой линией самого большого эластичного элемента.font-size.
Stretch -Эластичные элементы будут растягиваться, чтобы заполнить текущую строку или столбец, если это не阻止уется минимальной и максимальной шириной или высотой. Значение по умолчанию для атрибута align-items.

Данный пример покажет вам, как различные значения атрибута align-items влияют на многостолбцовый flex-контейнер с фиксированной высотой.

Пример

.flex-container {
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-align-items:　center;
　　　　
　　　　display:　flex;
　　　　align-items:　center;
}
.item1 {
　　　　width:　75px;
　　　　height: 100px;
　　　　background: #e84d51;
}
.item2 {
　　　　width:　125px;
　　　　height:　200px;
　　　　background: #7ed636;
}
.item3 {
　　　　width:　175px;
　　　　height:　150px;
　　　　background: #2f97ff;
}

Проверьте, как это выглядит‹/›

Вы также можете распределять доступное пространство по горизонтали в многострочном или многостолбцовом flex-контейнере. Атрибут align-content используется для выравнивания строк flex-контейнера, например, если на оси горизонтали остается избыточное пространство, то строки многострочного flex-контейнера выравниваются justify-content, как если бы вы выравнивали один элемент по основной оси.

Атрибут align-content принимает те же значения, что и justify-content, но его применяют к оси горизонтали, а не к основной оси. Он также принимает другую стоимость:

StretchДоступное пространство распределяется поровну между всеми строками или столбцами, чтобы увеличить их размер пересечения. Если оставшееся свободное пространство отрицательно, то это значение равно flex-start.

Данный пример покажет вам, как различные значения атрибута align-content влияют на многострочный flex-контейнер с фиксированной высотой.

Пример

.flex-container {
　　　　width:　500px;
　　　　min-height:　300px;
　　　　margin: 0 auto;
　　　　font-size: 32px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-flow: row wrap;
　　　　-webkit-align-content: space-around;
　　　　
　　　　display:　flex;
　　　　flex-flow: row wrap;
　　　　align-content: space-around;
}
.flex-container div {
　　　　width: 150px;
　　　　height: 100px;
　　　　background:　#dbdfe5;
}

Проверьте, как это выглядит‹/›

Перестановка различных Flex-элементов

Кроме изменения потока внутри flex-контейнера, вы также можете изменитьorderАтрибут показывает порядок отдельного flex-элемента. Этот атрибут принимает положительные или отрицательные целые числа в качестве значений. По умолчанию, все flex-элементы отображаются и раскладываются в порядке их появления в HTML-тегах, так как значение по умолчанию для order равно 0.

Данный пример покажет вам, как определить порядок отдельного эластичного элемента.

Пример

.flex-container {
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　display: -webkit-flex; /* Safari 6.1+ */
　　　　display:　flex;
}
.flex-container div {
　　　　padding:　10px;
　　　　width:　130px;
}
.item1 {
　　　　background: #e84d51;
　　　　-webkit-order: 2; /* Safari 6.1+ */
　　　　order: 2;
}
.item2 {
　　　　background: #7ed636;
　　　　-webkit-order: 1; /* Safari 6.1+ */
　　　　order: 1;
}
.item3 {
　　　　background: #2f97ff;
　　　　-webkit-order: -1; /* Safari 6.1+ */
　　　　order: -1;
}

Проверьте, как это выглядит‹/›

Внимание:Элементы с наименьшим значением порядка ставятся спереди, а элементы с наибольшим значением порядка ставятся в конце. Элементы с одинаковым значением порядка отображаются в порядке их появления в исходном документе.

Горизонтальное и вертикальное выравнивание Flexbox

Обычно, выравнивание контента по вертикали требует использования JavaScript или некоторых примитивных CSS-хаков. Однако, с помощью flexbox это можно сделать легко, не needing any adjustments.

Данный пример покажет вам, как с помощью функции CSS3 гибкой рамки легко выровнять контент по горизонтали и вертикали в центре.

Пример

.flex-container {
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　display: -webkit-flex; /* Safari 6.1+ */
　　　　display:　flex;　
}
.item {
　　　　width: 300px;
　　　　padding: 25px;
　　　　margin: auto;
　　　　background: #f0e68c;
}

Проверьте, как это выглядит‹/›

Включение перевода эластичных элементов по строкам

По умолчанию, эластичный контейнер показывает только одну строку или одну колонку эластичных элементов. Ноflex-wrapЕсли на одной伸缩ной строке не хватает места, вы можете использовать свойства flex-контейнера, чтобы определить, будут ли伸缩аемые элементы перенесены на новые строки.

Свойство flex-wrap принимает следующие значения:

nowrap-по умолчанию. Элементы размещаются в одной строке. Если на伸缩ной линии не хватает места, может возникнуть переполнение.
wrap —flex-контейнер разбивает flex-элементы на несколько строк, так же, как это происходит с текстом, который слишком широк, чтобы умещаться на текущей строке, и его разрезают на новую строку.
wrap-reverse —伸缩аемые элементы будут перенесены на новые строки при необходимости, но в обратном порядке, то естьНачало пересечения (cross-start)иКонец пересечения(cross-end)Направления будут меняться.

Следующие примеры покажут вам, как использовать свойство flex-wrap для отображения flex-элементов в одном или нескольких строках в flex-контейнере.

Пример

.flex-container {
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-wrap:　wrap;
　　　　
　　　　display:　flex;
　　　　flex-wrap:　wrap;　　
}
.flex-container div{
　　　　width:　130px;
　　　　padding:　10px;　　　　
　　　　background:　#dbdfe5;
}

Проверьте, как это выглядит‹/›

Внимание:Вы также можете использовать сокращенные CSS-свойства в одном объявленииflex-flowНастройте flex-direction и flex-wrap. Они принимают те же значения, что и соответствующие свойства, и значения могут быть в любом порядке.

Фильтры (Filters) в CSS3 Размер рамки (box-sizing) в CSS3