Свойство align-items задает выравнивание элементов вдоль поперечной оси. Применяется к родительскому элементу для flex блоков.
Синтаксис
селектор {
align-items: flex-start | flex-end | center | baseline | stretch;
}
Значения
Значение | Описание |
---|---|
flex-start | Блоки прижаты к началу поперечной оси. |
flex-end | Блоки прижаты к концу поперечной оси. |
center | Блоки стоят по центру поперечной оси. |
baseline | Элементы выравниваются по своей базовой линии. Базовая линия (англ. baseline, или линия шрифта) - это воображаемая линия, проходящая по нижнему краю символов без учета свисаний, например, как у букв 'ц', 'д', 'р', 'щ'. |
stretch | Блоки растянуты, занимая все доступное место по поперечной оси, при этом все же учитываются min-width и max-width, если они заданы. Если же задана ширина и высота для элементов - stretch будет проигнорирован. |
Значение по умолчанию: stretch.
Пример . Значение stretch
Сейчас главная ось направлена слева направо, а по поперечной оси элементы растянуты на всю высоту:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: flex;
align-items: stretch;
flex-direction: row;
border: 1px solid #696989;
}
#parent > div {
border: 1px solid #696989;
}
:
Пример . Значение stretch + размеры элемента
Сейчас для элементов задана ширина и высота, поэтому значение stretch для свойства align-items будет проигнорировано:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: flex;
align-items: stretch;
flex-direction: row;
border: 1px solid #696989;
}
#parent > div {
width: 100px;
height: 50px;
border: 1px solid #696989;
}
:
Пример . Значение flex-start без размеров элемента
Сейчас элементы будут прижаты к верху:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: flex;
align-items: flex-start;
flex-direction: row;
border: 1px solid #696989;
}
#parent > div {
border: 1px solid #696989;
}
:
Пример . Значение flex-start + размеры элемента
Сейчас элементы по прежнему будут прижаты к верху, однако у них будет заданная ширина и высота:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: flex;
align-items: flex-start;
flex-direction: row;
border: 1px solid #696989;
}
#parent > div {
width: 100px;
height: 50px;
border: 1px solid #696989;
}
:
Пример . Значение flex-end + размеры элемента
Сейчас элементы будут прижаты к низу:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: flex;
align-items: flex-end;
flex-direction: row;
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>4</div>
<div>5</div>
</div>
#parent {
display: flex;
align-items: center;
flex-direction: row;
border: 1px solid #696989;
}
#parent > div {
width: 100px;
height: 50px;
border: 1px solid #696989;
}
:
Пример . Значение center, элементы разного размера
Сейчас элементы имеют разный размер по высоте (сейчас они раздвигаются текстом, но можно задать и height), ширина у всех одинаковая, так как задано свойство width:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: flex;
align-items: center;
flex-direction: row;
border: 1px solid #696989;
}
#parent > div {
width: 100px;
border: 1px solid #696989;
}
:
Пример . Значение baseline, элементы разного размера
А вот так выглядит выравнивание по базовой линии align-items: baseline:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: flex;
align-items: baseline;
flex-direction: row;
border: 1px solid #696989;
}
#parent > div {
width: 130px;
line-height: 1;
border: 1px solid #696989;
}
:
Смотрите также
-
свойство flex-direction,
которое задает направление осей flex блоков -
свойство justify-content,
которое задает выравнивание по главной оси -
свойство align-items,
которое задает выравнивание по поперечной оси -
свойство flex-wrap,
которое многострочность flex блоков -
свойство flex-flow,
сокращение для flex-direction и flex-wrap -
свойство order,
которое задает порядок flex блоков -
свойство align-self,
которое задает выравнивание одного блока -
свойство flex-basis,
которое задает размер конкретного flex блока -
свойство flex-grow,
которое задает жадность flex блоков -
свойство flex-shrink,
которое задает сжимаемость flex блоков -
свойство flex,
сокращение для flex-grow, flex-shrink и flex-basis