СSS3 Гибкий Бокс
1
2
3
4
5
6
7
8
CSS3 модуль макет на основе адаптируемых блоков
До того, как расматривать модуль макет на основе адаптируемых блоков, ранее узнали про четыре режима макета:
- Блок, для разделов веб страницы
- Встроенный, для текста
- Таблица, для двумерных табличных данных
- Расположенние для конкретной позиции элемента
Гибкий модуль макет бокса, делает его более легко конструировать гибкую отзывчивую структуру макета без использования поплавка или размещении.
Поддержка браузеров
Свойства элемента поддерживается во всех современных браузерах.
| 29.0 | 11.0 | 22.0 | 10 | 48 |
Элементы модели Flexbox
Чтобы начать использовать модель Flexbox, необходимо сначала определить контейнер flex.
1
2
3
Элемент выше представляет собой гибкий контейнер (синяя область) с тремя гибкими элементами.
Пример
Гибкий контейнер с тремя элементами flex:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Родительский элемент (flex)
Гибкий контейнер становится гибкой настройкой свойства display к flex:
Свойства гибкого контейнера:
Свойство flex-direction
Свойство flex-direction определяет, в каком направлении контейнера
может сложить элементы flex.
1
2
3
Пример
Значение column штабелирует элементы flex по вертикали (сверху вниз):
.flex-container {
display: flex;
flex-direction: column;
}
Пример
Значение column-reverse штабелирует элементы flex по вертикали (но снизу вверх):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Пример
Значение row штабелирует элементы flex горизонтально (слева направо):
.flex-container {
display: flex;
flex-direction: row;
}
Пример
Значение row-reverse штабелирует элементы flex горизонтально (но справа налево):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
Свойство flex-wrap
Свойство flex-wrap определяет flex элементы должны быть обернуты или нет.
Примеры ниже имеют 12 гибких элементов, чтобы лучше продемонстрировать свойство flex-wrap.
1
2
3
4
5
6
7
8
9
10
11
12
Пример
Значение wrap значение указывает, что элементы flex
будут упакованы при необходимости:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Пример
Значение nowrap указывает, что элементы flex
не будут переноситься (по умолчанию):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Пример
Значение wrap-reverse указывает, что элементы flex будут обернуты
при необходимости, в обратном порядке:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
Свойство flex-flow
Свойство flex-flow является сокращенным свойством для установки свойств
flex-direction и flex-wrap.
Свойство justify-content
Свойство justify-content используется для выравнивание элементов flex:
1
2
3
Пример
Значение center выравнивает элементы flex в центре контейнера:
.flex-container {
display: flex;
justify-content: center;
}
Пример
Значение flex-start выравнивает элементы flex в начале контейнера
(по умолчанию):
.flex-container {
display: flex;
justify-content: flex-start;
}
Пример
Значение flex-end выравнивает элементы flex в конце контейнера:
.flex-container {
display: flex;
justify-content: flex-end;
}
Пример
Значение space-around отображает элементы flex с пробелом перед, между,
и после строк:
.flex-container {
display: flex;
justify-content: space-around;
}
Пример
Значение space-between отображает элементы flex с пробелом между строк:
.flex-container {
display: flex;
justify-content: space-between;
}
Свойство align-items
Свойство align-items используется для выравнивания элементов flex по вертикали.
1
2
3
В этих примерах мы используем контейнер высотой 200 пикселей, чтобы лучше продемонстрировать
свойство align-items.
Пример
Значение center выравнивает элементы flex в середине контейнер:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Пример
Значение flex-start выравнивает элементы flex в верхней части контейнера:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Пример
Значение flex-end выравнивает элементы flex в нижней части контейнера:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Пример
Значение stretch значение растягивает элементы flex для заполнения контейнера
(это по умолчанию):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Пример
Значение baseline выравнивает элементы flex,
по мере выравнивания базовых линий:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Примечание: в примере используется другой размер шрифта для демонстрации выравнивания элементов по базовой линии:
1
2
3
Свойство align-content
Свойство align-content используется для выравнивания гибких линий.
1
2
3
4
5
6
7
8
9
10
11
12
В этих примерах используется контейнер высотой 600 пикселей со свойством flex-wrap,
равным wrap, чтобы лучше продемонстрировать
свойство align-content.
Пример
Значение space-between отображает гибкие линии с равным расстоянием между ними:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Пример
Значение space-around отображает гибкие линии с пробелом перед, между ними и после них:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Пример
Значение stretch растягивает гибкие линии, чтобы занять оставшиеся пробелы (по умолчанию):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Пример
Значение center отображает гибкие линии в середине контейнера:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Пример
Значение flex-start отображает гибкие линии в начале контейнера:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Пример
Значение flex-end отображает гибкие линии в конце контейнера:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Идеальный центр
В следующем примере мы решим очень распространенную проблему стиля: идеального центрирование.
РЕШЕНИЕ: Установите оба свойства justify-content и
align-items по center,
и элемент flex будет совершенно по центру:
Пример
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
Дочерние элементы (элементов)
Прямые дочерние элементы контейнера flex
автоматически становятся гибкими элементами (flex).
1
2
3
4
Элемент выше представляет четыре синих элемента flex внутри серого контейнера flex.
Пример
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Свойства элемента flex:
Свойство order
Свойство order определяет порядок элементов flex.
1
2
3
4
Первый элемент flex в коде не должен отображаться как первый элемент в макете.
Порядок значения должен быть числом, по умолчанию 0.
Пример
Свойство order может изменять порядок элементов flex:
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
Свойство flex-grow
Свойство flex-grow указывает, насколько элемент flex
будет расти относительно остальных элементов flex.
1
2
3
Значение должно быть числом, по умолчанию 0.
Пример
Сделать третий элемент flex растянут в восемь раз больше,
чем другие гибкие элементы flex:
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow:
8">3</div>
</div>
Свойство flex-shrink
Свойство flex-shrink свойство указывает, насколько элемент flex
будет сжиматься относительно остальных элементов flex.
1
2
3
4
5
6
7
8
9
10
Значение должно быть числом, по умолчанию 1.
Пример
Не допустить, чтобы третий гибкий элемент flex сжимался так же сильно,
как и другие гибкие элементы flex:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
Свойство flex-basis
Свойство flex-basis указывает начальную длину гибкого элемента flex.
1
2
3
4
Пример
Задать начальную длину третьего элемента flex 200 пикселей:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
Свойство flex
Свойство flex свойство является сокращенным свойством для свойств
flex-grow, flex-shrink, и flex-basis.
Пример
Сделать третий гибкий элемент не растянутым (0), не сжимаемым (0) и с
начальной длиной 200 пикселей:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>
Свойство align-self
Свойство align-self определяет выравнивание выбранного элемента внутри гибкого контейнера.
Свойство align-self переопределяет выравнивание по умолчанию, установленных
контейнеров свойства align-items.
1
2
3
4
В этих примерах мы используем контейнер высотой 200 пикселей, чтобы лучше продемонстрировать
свойства align-self:
Пример
Выровнить третий гибкий элемент в середине контейнера:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
Пример
Выровнить второй гибкий элемент в верхней части контейнера, и третий гибкий элемент внижнем контейнере:
<div class="flex-container">
<div>1</div>
<div style="align-self: flex-start">2</div>
<div style="align-self: flex-end">3</div>
<div>4</div>
</div>
Отзывчивая галерея изображений с помощью гибкого бокса
Использованием гибково контейнера для создания отзывчивой галереи изображений, которая варьируется от четырех, двух или полной ширины изображений, в зависимости от размера экрана:
Редактор кода »Адаптивный сайт с помощью гибкого бокса
Используйте гибкого бокса для создания адаптивного веб сайта, содержащего гибкую панель навигации и гибкий контент:
Редактор кода »CSS свойства гибкого бокса
В следующей таблице перечислены свойства CSS3, используемые гибково бокса:
| Свойство | Описание |
|---|---|
| display | Указывает тип бокса, используемого для HTML элемента |
| flex-direction | Указывает направление гибких элементов в контейнере flex |
| justify-content | Выравнивание по горизонтали элементов flex, если элементы не используют все доступные пространства в main-axis |
| align-items | Выравнивание по вертикали элементов flex, если элементы не используют все доступное пространство на cross-axis |
| flex-wrap | Указывает, должны ли элементы flex переноситься или нет, если для них недостаточно места в одной строке flex |
| align-content | Изменяет поведение свойства flex-wrap. Он похож на align-items, но вместо выравнивания элементы flex он выравнивает flex линии |
| flex-flow | Сокращенное свойство для flex-direction и flex-wrap |
| order | Задает порядок гибкого элемента относительно остальных гибких элементов в том же контейнере |
| align-self | Используется для гибких элементов. Переопределяет свойство контейнера align-items |
| flex | Сокращенное свойство для свойств flex-grow, flex-shrink, и the flex-basis |
