CSS Flexbox

1
2
3
4
5
6
7
8

Попробуйте сами

Модуль гибкой рамки CSS (Flexbox)

До появления модуля гибкой рамки (Flexbox) были доступны следующие четыре типа режимов布局:

  • Блок (Block), используемый для частей веб-страницы (разделов)
  • Внутренний (Inline), используемый для текста
  • Таблица, используемая для двумерных таблиц данных
  • Позиционирование, используемое для точного положения элементов

Модуль гибкой рамки, который позволяет легко проектировать гибкие адаптивные структуры布局, не используя флоаты или позиционирование.

Поддержка браузеров

Все современные браузеры поддерживают flexbox Свойства.

29.0 11.0 22.0 10 48

Элементы Flexbox

Чтобы начать использовать модель Flexbox, вам нужно сначала определить контейнер Flex.

1
2
3

Элементы сверху представляют собой flex контейнер с тремя элементами flex (голубая область).

Пример

Контейнер flex, содержащий три элемента flex:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Попробуйте сами

родительский элемент (контейнер)

Через display Свойство установлено в flexКонтейнер flex будет растяжимым:

1
2
3

Пример

.flex-container {
  display: flex;
}

Попробуйте сами

Ниже приведены свойства 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, чтобы лучше демонстрировать свойство flex-wrap.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Пример

wrap Значение определяет, что элементы flex будут переписываться при необходимости:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

Попробуйте сами

Пример

nowrap Значение определяет, что элементы flex не будут переписываться (по умолчанию):

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

Попробуйте сами

Пример

wrap-reverse Значение определяет, если необходимо, элементы эластичности будут переписываться в обратном порядке:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

Попробуйте сами

Свойство flex-flow

flex-flow Атрибут является сокращением для одновременного设置了 flex-direction и flex-wrap свойств.

Пример

.flex-container {
  display: flex;
  flex-flow: row 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-container {
  display: flex;
  height: 200px;
  align-items: center;
}

Попробуйте сами

Пример

flex-start Значение выравнивает эластичные элементы в верхней части контейнера:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

Попробуйте сами

Пример

flex-end Значение выравнивает эластичные элементы в нижней части контейнера:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

Попробуйте сами

Пример

stretch Значение растягивает эластичные элементы, чтобы заполнить контейнер (по умолчанию):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

Попробуйте сами

Пример

baseline Значение выравнивает эластичные элементы по базовой линии текста:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

Попробуйте сами

Внимание:Этот пример использует различные значения font-size для демонстрации того, что элементы выровнены по текстовой базовой линии:

1
2
3
4

Свойство align-content

align-content Свойства используются для выравнивания эластичных линий.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

В этих примерах мы используем контейнеры высотой 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 Свойства установлены на центр, затем эластичные элементы будут идеально центрированы:

Пример

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

Попробуйте сами

Дети (элементы)

Прямые дети контейнера flex автоматически становятся эластичными (flex) элементами.

1
2
3
4

Элементы выше представляют собой четыре голубых эластичных элемента в灰色 эластичном контейнере.

Пример

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

Попробуйте сами

Для эластичных элементов используются следующие свойства:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

Свойство order

order Свойство определяет порядок эластичного элемента.

1
2
3
4

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

order Значение должно быть числом, значение по умолчанию 0.

Пример

order Свойство может изменить порядок эластичных элементов.

<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 Свойство определяет, на сколько растет определенный эластичный элемент по сравнению с другими эластичными элементами.

1
2
3

Значение должно быть числом, значение по умолчанию 0.

Пример

Сделать скорость роста третьего эластичного элемента в восемь раз быстрее, чем у других эластичных элементов:

<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 Свойство определяет, на сколько сжимается определенный эластичный элемент по сравнению с другими эластичными элементами.

1
2
3
4
5
6
7
8
9

Значение должно быть числом, значение по умолчанию 0.

Пример

Не позволять третьему эластичному элементу сжиматься так же, как и другим эластичным элементам:

<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 Свойство определяет начальную длину эластичного элемента.

1
2
3
4

Пример

Установить начальную длину третьего эластичного элемента в 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>

Попробуйте сами

Адаптивная галерея изображений с использованием Flexbox

Используйте Flexbox для создания адаптивной галереи изображений, которая изменяется между четырьмя, двумя или полными изображениями в зависимости от размера экрана:

Попробуйте сами

Адаптивный веб-сайт с использованием Flexbox

Используйте flexbox для создания адаптивных веб-сайтов, включая эластичную навигацию и эластичное содержимое:

Попробуйте сами

Свойства CSS Flexbox

В таблице приведены свойства CSS, используемые вместе с flexbox:

Свойства Описание
display Определяет тип контейнера для HTML-элементов.
flex-direction Определяет направление эластичных элементов в эластичном контейнере.
justify-content Горизонтально выравнивает элементы, когда эластичные элементы не используют все доступное пространство по.main axis.
align-items Вертикально выравнивает элементы, когда эластичные элементы не используют все доступное пространство по.main axis.
flex-wrap Определяет, должны ли эластичные элементы переходить на новую строку, если на одной линии flex нет достаточного места для их размещения.
align-content Изменяет поведение свойства flex-wrap. Как и align-items, но не выравнивает эластичные элементы, а выравнивает линию flex.
flex-flow Сокращенные свойства свойств flex-direction и flex-wrap.
order Определяет порядок эластичных элементов относительно других эластичных элементов в том же контейнере.
align-self Предназначен для эластичных элементов. Перекрывает свойство align-items контейнера.
flex Сокращенные свойства свойств flex-grow, flex-shrink и flex-basis.