Свойство align-content - выравнивание по поперечной или вертикальной оси
Свойство align-content задает выравнивание
элементов вдоль поперечной оси для flex блоков
и по вертикальной оси для гридов.
Применяется к родительскому элементу.
Синтаксис
селектор {
align-content: flex-start | flex-end | center | space-between | space-around;
}
Значения
| Значение | Описание |
|---|---|
flex-start |
Блоки прижаты к началу поперечной (вертикальной) оси. |
flex-end |
Блоки прижаты к концу поперечной (вертикальной) оси. |
center |
Блоки стоят по центру поперечной (вертикальной) оси. |
space-between |
Блоки распределены вдоль поперечной (вертикальной) оси, при этом первый элемент прижат к началу оси, а последний - к концу. |
space-around |
Блоки распределены вдоль поперечной (вертикальной) оси,
при этом между первым блоком и началом оси,
последним блоком и концом оси такой же промежуток,
как и между остальными блоками.
Однако, они не равны, как могло бы показаться: промежутки суммируются и между двумя блоками расстояние в два раза больше, чем между блоком и началом/концом оси. |
Пример . Значение flex-start
В данном примере ось, по которой идет выравнивание направлена сверху внизу, т.е. она является поперечной. Как видно из полученного результата, все наши элементы прижату к ее верхней части:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: flex;
align-content: flex-start;
flex-wrap: wrap;
height: 200px;
border: 1px solid #696989;
}
#parent > div {
width: 100px;
height: 50px;
border: 1px solid #696989;
}
:
Пример . Значение flex-end
В данном примере блоки прижаты к нижней стороне
поперечной оси, так как свойство align-content задано в значении
flex-end:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: flex;
align-content: flex-end;
flex-wrap: wrap;
height: 200px;
border: 1px solid #696989;
}
#parent > div {
width: 100px;
height: 50px;
border: 1px solid #696989;
}
:
Пример . Значение center
Сейчас блоки выравнены по центру поперечной оси:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: flex;
align-content: center;
flex-wrap: wrap;
height: 200px;
border: 1px solid #696989;
}
#parent > div {
width: 100px;
height: 50px;
border: 1px solid #696989;
}
:
Выравнивание по началу вертикальной оси в гриде
Давайте установим выравнивание для наших элементов в гриде по началу вертикальной оси:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
align-content: start;
grid-template-columns: 100px 100px;
gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Выравнивание по центру вертикальной оси в гриде
А теперь давайте установим выравнивание элементов по центру вертикальной оси:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
align-content: center;
grid-template-columns: 100px 100px;
gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Выравнивание по концу вертикальной оси в гриде
Давайте установим выравнивание элементов по концу вертикальной оси:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
align-content: end;
grid-template-columns: 100px 100px;
gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Смотрите также
-
свойство
flex-direction,
которое задает направление осей flex блоков -
свойство
justify-content,
которое задает выравнивание по главной оси -
свойство
align-items,
которое задает выравнивание по поперечной оси -
свойство
flex-wrap,
которое задает многострочность flex блоков -
свойство
flex-flow,
сокращение для flex-direction и flex-wrap -
свойство
order,
которое задает порядок flex блоков -
свойство
align-self,
которое задает выравнивание одного блока -
свойство
place-content,
которое задает выравнивание по главной и поперечной осям