align-self¶

Свойство align-self выравнивает флекс-элементы текущей строки, переписывая значение align-items. Если у какого-либо flex-элемента margin в поперечной оси выставлен в auto, то align-self игнорируется.

Flexbox и выравнивание

Синтаксис¶

/* Keyword values */
align-self: auto;
align-self: normal;

/* Positional alignment */
/* align-self does not take left and right values */
align-self: center; /* Put the item around the center */
align-self: start; /* Put the item at the start */
align-self: end; /* Put the item at the end */
align-self: self-start; /* Align the item flush at the start */
align-self: self-end; /* Align the item flush at the end */
align-self: flex-start; /* Put the flex item at the start */
align-self: flex-end; /* Put the flex item at the end */

/* Baseline alignment */
align-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch; /* Stretch 'auto'-sized items to fit the container */

/* Overflow alignment */
align-self: safe center;
align-self: unsafe center;

/* Global values */
align-self: inherit;
align-self: initial;
align-self: unset;

Значения¶

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

Применяется к: флексам, гридам

auto: Берёт родительское значение align-items или stretch, если нет родителя.
flex-start: Элемент выравнивается в начале поперечной оси контейнера.
flex-end: Элемент выравнивается в конце поперечной оси контейнера.
center: Элемент выравнивается по центральной линии на поперечной оси.
baseline: Элемент выравнивается по базовой линии текста.
stretch: Элемент растягивается таким образом, чтобы занять всё свободное пространство контейнера по поперечной оси.

Спецификации¶

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

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-items</title>
    <style>
      .flex-container {
        display: flex;
        align-items: flex-start;
        height: 160px; /* Высота контейнера */
      }
      .flex-item {
        margin-left: 1rem; /* Расстояние между блоками */
        padding: 10px; /* Поля вокруг текста */
        width: 33.333%; /* Ширина блоков */
      }
      .flex-item:first-child {
        margin-left: 0;
      }
      .flex-item:hover {
        align-self: stretch; /* Растягиваем при наведении */
      }
      .item1 {
        background: #f0ba7d;
      }
      .item2 {
        background: #cae2aa;
      }
      .item3 {
        background: #a6c0c9;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item item1">
        Фенек — лисица, живущая в пустынях Северной Африки.
        Имеет достаточно миниатюрный размер и своеобразную
        внешность с большими ушами.
      </div>
      <div class="flex-item item2">
        Корсак — хищное млекопитающее рода лисиц.
      </div>
      <div class="flex-item item3">
        Лисица — хищное млекопитающее семейства псовых,
        наиболее распространённый и самый крупный вид рода
        лисиц.
      </div>
    </div>
  </body>
</html>

Примечание¶

Safari до версии 9 поддерживает свойство -webkit-align-self.

См.также¶

Свойство align-items