align-content | WebReference

Задаёт тип выравнивания строк внутри флекс-контейнера по поперечной оси при наличии свободного пространства.

Краткая информация

Значение по умолчаниюstretch
НаследуетсяНет
ПрименяетсяК флекс-контейнеру
АнимируетсяНет

Синтаксис

align-content: flex-start | flex-end | center | 
  space-between | space-around | space-evenly | stretch
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

ЗначениеПоложениеОписание
flex-startСтроки располагаются в начале поперечной оси. Каждая следующая строка идёт вровень с предыдущей.
centerСтроки располагаются по центру контейнера.
flex-endСтроки располагаются начиная с конца поперечной оси. Каждая предыдущая строка идёт вровень со следующей.
space-betweenСтроки равномерно распределяются в контейнере и расстояние между ними одинаково.
space-aroundСтроки равномерно распределяются таким образом, чтобы пространство между двумя соседними строками было одинаковым. Пустое пространство перед первой строкой и после последней строки равно половине пространства между двумя соседними строками.
space-evenlyСтроки равномерно распределяются таким образом, чтобы пространство между двумя соседними строками, а также пространство перед первой строкой и после последней строки было одинаковым.
stretch
Строки равномерно растягиваются, заполняя свободное пространство.

Песочница

flex-start flex-end center space-between space-around space-evenly stretch

div {
  display: flex;
  align-content: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>align-content</title> <style> .flex-container { width: 70px; height: 240px; border: 1px solid #333; padding: 10px; display: flex; flex-wrap: wrap; align-content: center; } .flex-container div { width: 70px; height: 70px; border-radius: 50%; } .red { background: red; } .yellow { background: yellow; } .green { background: green; } </style> </head> <body> <div> <div></div> <div></div> <div></div> </div> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Использование свойства align-content

Объектная модель

Объект. style.alignContent

Примечание

Safari до версии 9 поддерживает свойство -webkit-align-content.

Спецификация

СпецификацияСтатус
CSS Box Alignment Module Level 3
Рабочий проект
CSS Flexible Box Layout Module Level 1Возможная рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

11132912.1
6.1
928
4.42812.17.19.2
Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Флексы

См. также

  • place-content
  • Выравнивание с помощью флексбоксов
  • Свойства flex-контейнера

align-content ⚡️ HTML и CSS с примерами кода

Свойство align-content задаёт тип выравнивания строк внутри флекс-контейнера по поперечной оси при наличии свободного пространства.

Демо

Это свойство не влияет на однострочные flex-контейнеры (т. е. с flex-wrap: nowrap).

Flexbox и выравнивание
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • order
  • justify-content
  • align-content
  • place-content
  • justify-items
  • align-items
  • place-items
  • justify-self
  • align-self
  • place-self
  • row-gap
  • column-gap
  • gap

Синтаксис

/* Positional alignment */
align-content: center; /* Pack items around the center */
align-content: start; /* Pack items from the start */
align-content: end; /* Pack items from the end */
align-content: flex-start; /* Pack flex items from the start */
align-content: flex-end; /* Pack flex items from the end */
align-content: left; /* Pack items from the left */
align-content: right; /* Pack items from the right */
/* Baseline alignment */
align-content: baseline;
align-content: first baseline;
align-content: last baseline;
/* Distributed alignment */
/* Distribute items evenly
The first item is flush with the start,
the last is flush with the end */
align-content: space-between;
/* Distribute items evenly
Items have a half-size space
on either end */
align-content: space-around;
/* Distribute items evenly
Items have equal space around them */
align-content: space-evenly;
/* Distribute items evenly
Stretch 'auto'-sized items to fit
the container */
align-content: stretch;
/* Overflow alignment */
align-content: safe center;
align-content: unsafe center;
/* Global values */
align-content: inherit;
align-content: initial;
align-content: unset;

Значения

Значение по-умолчанию: stretch

Применяется к флекс-контейнеру

flex-startСтроки располагаются в начале поперечной оси. Каждая следующая строка идёт вровень с предыдущей.
centerСтроки располагаются по центру контейнера.
flex-endСтроки располагаются начиная с конца поперечной оси. Каждая предыдущая строка идёт вровень со следующей.
space-betweenСтроки равномерно распределяются в контейнере и расстояние между ними одинаково.
space-aroundСтроки равномерно распределяются таким образом, чтобы пространство между двумя соседними строками было одинаковым. Пустое пространство перед первой строкой и после последней строки равно половине пространства между двумя соседними строками.
stretchСтроки равномерно растягиваются, заполняя свободное пространство.

Спецификации

  • CSS Flexible Box Layout Module

Поддержка браузерами

Пример

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>align-content</title>
    <style>
      . flex-container {
        width: 70px;
        height: 240px;
        border: 1px solid #333;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
      }
      .flex-container div {
        width: 70px;
        height: 70px;
        border-radius: 50%;
      }
      .red {
        background: red;
      }
      .yellow {
        background: yellow;
      }
      .green {
        background: green;
      }
    </style>
  </head>
  <body>
    <div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

Примечание

Safari до версии 9 поддерживает свойство -webkit-align-content.

Ссылки

  • Свойство align-content MDN (рус.)

Свойство CSS align-content

❮ Назад Полное руководство по CSS Далее ❯


Пример

Упаковать строки по направлению к центру гибкого контейнера:

div{
  width: 70px;
  высота: 300 пикселей;
  граница: 1 пиксель сплошная #c3c3c3;
  дисплей: гибкий;
  flex-wrap: обернуть;
  align-content: center;
}

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

Другие примеры «Попробуйте сами» ниже.


Определение и использование

9Свойство 0026 align-content указывает, как flex-линии распределяются вдоль поперечной оси в flexbox-контейнере.

В макете flexbox главная ось находится в flex-направлении (по умолчанию «ряд», горизонтальная), а поперечная ось перпендикулярна главной оси (по умолчанию «столбец», вертикальная).

Совет: Используйте свойство justify-content для выравнивания элементов по главной оси (по горизонтали).

Примечание: align-content 9Свойство 0027 также можно использовать в контейнере сетки для выравнивания элементов сетки в направлении блока. Для страниц на английском языке направление блока — вниз, а направление строки — слева направо.

Показать демо ❯

Значение по умолчанию: стрейч
Унаследовано: нет
Анимация: №. Читать про анимированный
Версия: CSS3
Синтаксис JavaScript: объект .style.alignContent="center" Попробуй


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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
выравнивание содержимого 57,0 16,0 52,0 10,1 44,0



Синтаксис CSS

align-content: stretch|center|flex-start|flex-end|space-between|space-around|space-evenly|initial|inherit;

Значения свойств

Значение Описание Демо
стрейч Значение по умолчанию. Линии растягиваются, чтобы занять оставшееся место Демонстрация ❯
центр Строки упакованы по направлению к центру гибкого контейнера Демонстрация ❯
гибкий пуск Строки упакованы ближе к началу гибкого контейнера Демонстрация ❯
гибкий конец Строки упакованы ближе к концу гибкого контейнера Демонстрация ❯
пробел-между Строки равномерно распределены во флекс-контейнере Демонстрация ❯
пространство вокруг Строки равномерно распределены во гибком контейнере с пробелами половинного размера на обоих концах Демонстрация ❯
равномерно Строки равномерно распределены во гибком контейнере с равным пространством вокруг них Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать


Другие примеры

Пример с сеткой

Все элементы расположены в конце контейнера сетки в направлении блока:

#container {
  display: grid;
  align-content: end;
}

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


Связанные страницы

Учебник CSS: CSS flexbox

Учебник CSS: CSS grid

Справочник по CSS: свойство align-items

Справочник по CSS: свойство align-02 90 свойство justify-content

Ссылка HTML DOM: свойство alignContent

❮ Назад Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА



Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

904 Справочник Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Свойство CSS align-items

❮ Назад Полное руководство по CSS Далее ❯


Пример

Выравнивание по центру всех элементов гибкого элемента

:

div {
  дисплей: гибкий;
  align-items: center;
}

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

Другие примеры "Попробуйте сами" ниже.


Определение и использование

Свойство align-items указывает выравнивание по умолчанию для элементов внутри контейнера flexbox или grid.

  • В контейнере flexbox элементы flexbox выравниваются по поперечной оси, которая по умолчанию является вертикальной (противоположной flex-direction).
  • В контейнере сетки элементы сетки выравниваются в направлении блоков. Для страниц на английском языке направление блока — вниз, а направление строки — слева направо.

Чтобы это свойство имело какой-либо эффект выравнивания, элементы должны иметь свободное пространство вокруг себя в соответствующем направлении.

Совет: Используйте свойство align-self каждого элемента, чтобы переопределить свойство align-items .

Показать демо ❯

Значение по умолчанию: обычный
Унаследовано: нет
Анимация: №. Читать про анимированный
Версия: CSS3
Синтаксис JavaScript: объект .style.alignItems="center" Попробуй


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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
элементы выравнивания 57,0 16,0 52,0 10,1 44,0



Синтаксис CSS

align-items: normal|stretch| позиционное выравнивание |flex-start|flex-end|baseline|initial|inherit;

Значения свойств

Значение Описание Играй
обычный По умолчанию. Ведет себя как «растяжение» для flexbox и элементов сетки или «старт» для элементов сетки с определенным размером блока. Демонстрация ❯
стрейч Предметы растягиваются, чтобы соответствовать контейнеру Демонстрация ❯
центр Предметы расположены в центре контейнера Демонстрация ❯
гибкий пуск Элементы располагаются в начале контейнера Демонстрация ❯
гибкий конец Предметы располагаются в конце контейнера Демонстрация ❯
начало Элементы располагаются в начале своих отдельных ячеек сетки в направлении блока
конец Элементы расположены в конце их отдельных ячеек сетки в направлении блока
базовый уровень Элементы располагаются на базовой линии контейнера Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать


Другие примеры

Пример

Элементы расположены в начале контейнера:

div {
  display: flex;
  align-items: flex-start;
}

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

Пример

Элементы расположены в конце контейнера:

div {
  display: flex;
  align-items: flex-end;
}

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

Пример

Элементы расположены на базовой линии контейнера:

div {
  display: flex;
  align-items: базовый уровень;
}

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

Пример

Предметы растянуты по размеру контейнера:

div {
  display: flex;
  align-items: растянуть;
}

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

Пример с сеткой

Элементы выравниваются в начале каждой ячейки сетки в направлении блоков:

#container {
  display: grid;
  align-items: start;
}

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

Пример с абсолютным позиционированием

Элементы выравниваются в конце каждой ячейки сетки в направлении блока для элементов сетки с абсолютным позиционированием:

#container {
  display: grid;
  позиция: относительная;
  align-items: end;
}

#container > div {
  position: absolute;
}

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


Связанные страницы

Учебник CSS: CSS grid

Учебник CSS: CSS flexbox

Справочник по CSS: свойство align-content свойство содержимого

Справочник по CSS: свойство justify-items

Ссылка CSS: свойство justify-self

Ссылка HTML DOM: свойство alignItems

❮ Предыдущая Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА



Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference


4 Top4 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.