Content align css: align-content — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

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

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

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse. com.

Пример

<!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 (рус. )

align-content | CSS справочник

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

11.0+ 28.0+ 21.0+ 12.1+
9.0+

Описание

CSS свойство align-content указывает, каким образом будут выравниваться flex-элементы по вертикали внутри flex-контейнера, если разрешён перенос элементов и строк с элементами две или больше.

Примечание: для выравнивания flex-элементов по горизонтали используйте свойство justify-content.

Значение по умолчанию: stretch
Применяется: к многострочным flex-контейнерам
Анимируется: нет
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object. style.alignContent=»center»;

Синтаксис

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

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

Значение Описание
stretch Значение по умолчанию. Если у flex-элементов не задана высота, то они растягиваются на всю высоту контейнера так, чтобы каждая строка имела одинаковую высоту.
center flex-элементы располагаются точно по центру flex-контейнера, то есть снизу и сверху от элементов расстояние до границ контейнера будет одинаковым.

Примечание: если flex-элементы занимают больше вертикального пространства, чем высота контейнера, то элементы сместятся так, чтобы переполнение было одинаковым с обоих сторон контейнера.
flex-start flex-элементы выравниваются по левому верхнему углу контейнера.
flex-end flex-элементы выравниваются по левому нижнему углу контейнера.
space-between Строки с flex-элементами равномерно распределяются по вертикали так, чтобы между каждой парой соседних строк расстояние было одинаковым. Первая строка прилегает своей верхней границей к верхней границе контейнера, а последняя строка прилегает своей нижней границей к нижней границе контейнера.

Примечание: если flex-элементы занимают больше вертикального пространства, чем высота контейнера, то данное значение будет соответствовать значению flex-start.
space-around Строки с flex-элементы равномерно распределяются по вертикали так, чтобы между каждой парой соседних строк расстояние было одинаковым. Пустое пространство перед первой и после последней строки равно половине расстояния между каждой парой соседних строк.

Примечание: если flex-элементы занимают больше вертикального пространства, чем высота контейнера, то данное значение будет соответствовать значению center.

Пример

align-content:

stretch

center

flex-start

flex-end

space-between

space-around

1

2

3

4

5

6

7

#main {
width: 200px;
height: 200px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
align-content: stretch;
}

align-content · WebPlatform Docs

Резюме

Выравнивает строки гибкого контейнера внутри гибкого контейнера, когда на поперечной оси есть дополнительное пространство, аналогично тому, как justify-content выравнивает отдельные элементы внутри основной оси.

Обзорная таблица

Исходное значение
стрейч
Применяется к
многострочных гибких контейнеров
Унаследовано
Нет
СМИ
визуальный
Расчетное значение
указанное значение
Анимируемый
Нет
Свойство объектной модели CSS
выравнивание содержимого

Синтаксис

  • align-content: center
  • выравнивание содержимого: гибкий конец
  • выравнивание содержимого: гибкий старт
  • выравнивание содержимого: пространство вокруг
  • выравнивание содержимого: пробел между
  • выравнивание содержимого: растянуть
  • flex-line-pack: центр
  • flex-line-pack: распространение
  • flex-line-pack: конец
  • flex-line-pack: выравнивание
  • flex-line-pack: start
  • flex-line-pack: стрейч

Значения

гибкий старт
Строки упаковываются в начало гибкого контейнера.
Край пересечения первой строки в контейнере flex размещается на одном уровне с краем начала flex контейнера, а каждая последующая строка размещается на одном уровне с предыдущей строкой.
гибкий конец
Строки упаковываются ближе к концу гибкого контейнера. Поперечный край последней строки размещается на одном уровне с поперечным краем гибкого контейнера, а каждая предыдущая строка размещается на одном уровне с последующей строкой.
центр
Строки упакованы по направлению к центру гибкого контейнера. Строки во флекс-контейнере размещаются на одном уровне друг с другом и выравниваются по центру флекс-контейнера с равным количеством пустого пространства между краем содержимого флекс-контейнера и первой строкой в ​​флекс-контейнере, а также между край перекрестного содержимого гибкого контейнера и последняя строка в гибком контейнере. (Если остаточное свободное пространство отрицательно, строки будут переполняться одинаково в обоих направлениях.
)
пробел-между
Строки равномерно распределены во флекс-контейнере. Если остаточное свободное пространство отрицательное, это значение идентично flex-start . В противном случае край первой строки во флекс-контейнере помещается на одном уровне с краем содержимого флекс-контейнера, а край последней строки во флекс-контейнере помещается на одном уровне с краем содержимого флекс-контейнера. end content edge flex-контейнера, а оставшиеся строки в flex-контейнере распределяются так, чтобы пустое пространство между любыми двумя соседними строками было одинаковым.
пробел-вокруг
Строки равномерно распределены во гибком контейнере с пробелами половинного размера на обоих концах. Если оставшееся свободное пространство отрицательное, это значение идентично center . В противном случае строки во гибком контейнере распределяются таким образом, что пустое пространство между любыми двумя соседними строками одинаково, а пустое пространство перед первой и после последней строк во гибком контейнере составляет половину размера других пустых пространств.
стрейч
Строки растягиваются, чтобы занять оставшееся место. Если остаточное свободное пространство отрицательное, это значение идентично flex-start . В противном случае свободное пространство делится поровну между всеми линиями, увеличивая их поперечный размер.

Примеры

Интервал между строками в многострочном гибком контейнере. Измените значения в живом примере.

 .контейнер {
    дисплей: гибкий;
    flex-flow: перенос строк;
    выравнивание содержимого: пространство вокруг;
    ширина: 400 пикселей;
    высота: 200 пикселей;
    фон: #CCC;
}
.контейнер раздел {
    высота: 30 пикселей; /* установите для этого параметра значение «auto», чтобы увидеть, как линии реагируют на «align-items: stretch» ​​*/
    поле: 0px;
}
.container .третий элемент {
  ширина: 160 пикселей;
  фон: #CC3333;
  размер шрифта: 14px;
}
.container .второй элемент {
  ширина: 140 пикселей;
  фон: #FFFC33;
}
.контейнер .первый элемент {
  ширина: 100 пикселей;
  фон: #3333FF;
}

Просмотреть живой пример

Примечания

  • Это свойство не действует, если flexbox имеет только одну строку. Только flex-контейнеры с несколькими строками могут когда-либо иметь свободное пространство на поперечной оси для выравнивания строк, потому что в flex-контейнере с одной строкой единственная линия автоматически растягивается, чтобы заполнить пространство.
  • В более ранних проектах это свойство называлось flex-line-pack .

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

Модуль компоновки гибких блоков CSS
Рекомендация кандидата

См. также

Статьи по теме

Flexbox

  • align-content

  • элементы выравнивания

  • самовыравнивание

  • обрыв перед

  • гибкий

  • гибкая основа

  • flex-направление

  • гибкий поток

  • гибкий рост

  • гибкий термоусадочный

  • гибкая пленка

  • выравнивание содержимого

Внешние ресурсы

Также посетите следующие демонстрационные сайты:

  • Flexbox Playground
  • Флекси-боксы
  • Начинающие
  • Концепции
  • HTML
  • УСБ
  • Доступность
  • JavaScript
  • ДОМ
  • СВГ

css — Запутался между Justify-content:, align-items: и text-align

Justify-content:

На коротком justify-content выровняйте содержимое контейнера (как следует из названия). Это может быть, например, один или несколько дочерних элементов компонента. Вы должны это сделать, когда хотите выровнять другие контейнеры в целом (например, кнопки, div, входы и т. д.).

Внимание! Как упоминал @Aman Sharma justify-content

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

.

Это означает, что если вы используете flex-direction: column , главной осью будет ось Y (поэтому justify-content: center фактически центрирует элементы по вертикали, а align-item: center выполнит работу для горизонтальное выравнивание).

(Противоречие, если вы используете flex-direction: row или не указываете направление, justify-content:center будет центрировать содержимое по горизонтали).

Align-items

Как вы уже могли догадаться, вертикальное выравнивание чем-то похоже на justify-content , но это верно лишь частично. В то время как align-items: center выполняет работу по центрированию дочерних элементов контейнера на поперечной оси, есть некоторые отличия. Одним из наиболее очевидных является то, что они не имеют общих свойств ( justify-content имеет space-between , space-arround и т. д., а align-items имеет baseline , self-start и т. д.).

Чтобы лучше понять это (и флексбокс в целом), боюсь, ярлыков нет. Но я бы порекомендовал вам попытаться найти учебник, который, по вашему мнению, вам подходит (видео или текст — не имеет большого значения), и попробовать немного поиграть с ними.

Text-align

Одно из основных отличий между text-align + vertical-align и justify-content + align-items заключается в том, что первая пара работает только с блочными элементами , а вторая работает только с гибкими контейнерами .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *