тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Свойство align-items

Свойство 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