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

Свойство align-self

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

Синтаксис

селектор { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

Значения

Значение Описание
flex-start Блок прижат к началу поперечной оси.
flex-end Блок прижат к концу поперечной оси.
center Блок стоит по центру поперечной оси.
baseline Блок выравнивается по своей базовой линии. Базовая линия (англ. baseline, или линия шрифта) - это воображаемая линия, проходящая по нижнему краю символов без учета свисаний, например, как у букв 'ц', 'д', 'р', 'щ'.
stretch Блок растянут, занимая все доступное место по поперечной оси, при этом все же учитываются min-width и max-width, если они заданы. Если же задана ширина и высота для элемента - stretch будет проигнорирован.
auto Блок будет выровнен так, как задано в свойстве align-items.

Значение по умолчанию: auto.

Пример . Значение stretch

В данном примере всем блокам задано значение flex-start (свойство align-items), а третьему блоку - align-self в значении stretch:

<div id="parent"> <div>1</div> <div>2</div> <div id="elem">3</div> <div>4</div> <div>5</div> </div> #parent { display: flex; align-items: flex-start; flex-direction: row; border: 1px solid #696989; height: 100px; } #parent > div { min-width: 100px; border: 1px solid #696989; } #elem { align-self: stretch; }

:

Пример . Значение flex-end

В данном примере всем блокам для свойства align-items задано значение flex-start, а третьему блоку - align-self в значении flex-end:

<div id="parent"> <div>1</div> <div>2</div> <div id="elem">3</div> <div>4</div> <div>5</div> </div> #parent { display: flex; align-items: flex-start; flex-direction: row; border: 1px solid #696989; height: 100px; } #parent > div { min-width: 100px; border: 1px solid #696989; } #elem { align-self: flex-end; }

:

Смотрите также

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