align-self ⚡️ HTML и CSS с примерами кода

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

Демо

Flexbox и выравнивание
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • order
  • justify-content
  • align-content
  • place-content
  • justify-items
  • align-items
  • place-items
  • justify-self
  • align-self
  • place-self
  • row-gap
  • column-gap
  • gap

Синтаксис

/* 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
Элемент растягивается таким образом, чтобы занять всё свободное пространство контейнера по поперечной оси.

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

  • CSS Box Alignment Module Level 3
  • CSS Flexible Box Layout Module

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

Описание и примеры

<!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>
      <div>
        Фенек — лисица, живущая в пустынях Северной Африки.
        Имеет достаточно миниатюрный размер и своеобразную
        внешность с большими ушами.
      </div>
      <div>
        Корсак — хищное млекопитающее рода лисиц.
      </div>
      <div>
        Лисица — хищное млекопитающее семейства псовых,
        наиболее распространённый и самый крупный вид рода
        лисиц.
      </div>
    </div>
  </body>
</html>

Примечание

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

См.также

  • Свойство align-items

Выравнивание элементов. align-items и align-self ⚡️ HTML и CSS с примерами кода

Свойство align-items

Свойство align-items также выравнивает элементы, но уже по поперечной оси (cross axis) (при расположении в виде строки по вертикали, при расположении в виде столбца — по горизонтали). Это свойство может принимать следующие значения:

  • stretch: значение по умолчанию, при котором flex-элементы растягиваются по всей высоте (при расположении в строку) или по всей ширине (при расположении в столбик) flex-контейнера
  • flex-start: элементы выравниваются по верхнему краю (при расположении в строку) или по левому краю (при расположении в столбик) flex-контейнера
  • flex-end: элементы выравниваются по нижнему краю (при расположении в строку) или по правому краю (при расположении в столбик) flex-контейнера
  • center: элементы выравниваются по центру flex-контейнера
  • baseline: элементы выравниваются в соответствии со своей базовой линией

Выравнивание при расположении в строку:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Flexbox в CSS3</title>
    <style>
      . flex-container {
        display: flex;
        border: 1px #ccc solid;
        height: 5em;
      }
      .flex-start {
        align-items: flex-start;
      }
      .flex-end {
        align-items: flex-end;
      }
      .center {
        align-items: center;
      }
      .baseline {
        align-items: baseline;
      }
      .flex-item {
        text-align: center;
        font-size: 1em;
        padding: 1.2em;
        color: white;
      }
      .largest-item {
        padding-top: 2em;
      }
      .color1 {
        background-color: #675ba7;
      }
      .color2 {
        background-color: #9bc850;
      }
      .color3 {
        background-color: #a62e5c;
      }
      .color4 {
        background-color: #2a9fbc;
      }
    </style>
  </head>
  <body>
    <h4>Flex-start</h4>
    <div>
      <div>Flex Item 1</div>
      <div>Flex Item 2</div>
      <div>Flex Item 3</div>
      <div>Flex Item 4</div>
    </div>
    <h4>Flex-end</h4>
    <div>
      <div>Flex Item 1</div>
      <div>Flex Item 2</div>
      <div>Flex Item 3</div>
      <div>Flex Item 4</div>
    </div>
    <h4>Center</h4>
    <div>
      <div>Flex Item 1</div>
      <div>Flex Item 2</div>
      <div>Flex Item 3</div>
      <div>Flex Item 4</div>
    </div>
    <h4>Baseline</h4>
    <div>
      <div>Flex Item 1</div>
      <div>
        Flex Item 2
      </div>
      <div>Flex Item 3</div>
      <div>Flex Item 4</div>
    </div>
  </body>
</html>

Аналогично свойство работает при расположении в столбик.

Например, изменим стили flex-контейнера следующим образом:

.flex-container {
  display: flex;
  border: 1px #ccc solid;
  flex-direction: column;
  width: 12em;
}

Свойство align-self

Свойство align-self позволяет переопределить значение свойства align-items для одного элемента. Оно может принимать все те же значения плюс значение auto:

  • auto: значение по умолчанию, при котором элемент получает значение от свойства align-items, которое определено в flex-контейнере. Если в контейнере такой стиль не определен, то применяется значение
    stretch    .
  • stretch
  • flex-start
  • flex-end
  • center
  • baseline
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Flexbox в CSS3</title>
    <style>
      .flex-container {
        display: flex;
        border: 1px #ccc solid;
        justify-content: space-between;
        align-items: stretch;
        height: 12em;
      }
      . flex-item {
        text-align: center;
        font-size: 1em;
        padding: 1.2em;
        color: white;
      }
      .item1 {
        background-color: #675ba7;
        align-self: center;
      }
      .item2 {
        background-color: #9bc850;
        align-self: flex-start;
      }
      .item3 {
        background-color: #a62e5c;
        align-self: flex-end;
      }
      .item4 {
        background-color: #2a9fbc;
        align-self: center;
      }
    </style>
  </head>
  <body>
    <h4>Align-self</h4>
    <div>
      <div>Flex Item 1</div>
      <div>Flex Item 2</div>
      <div>Flex Item 3</div>
      <div>Flex Item 4</div>
    </div>
  </body>
</html>

Здесь для flex-контейнера задано растяжение по высоте с помощью значения

align-items: stretch;. Однако каждый из элементов переопределяет это поведение:

См. также

  • align-items
  • align-self

align-self — CSS: Каскадные таблицы стилей

Свойство CSS align-self переопределяет значение align-items сетки или гибкого элемента. В сетке он выравнивает элемент внутри области сетки. Во Flexbox он выравнивает элемент по поперечной оси.

Это свойство не применяется к блокам на уровне блоков или к ячейкам таблицы. Если поперечное поле элемента flexbox равно auto , то align-self игнорируется.

 /* Значения ключевых слов */
выравнивание: авто;
выравнивание: нормальное;
/* Позиционное выравнивание */
/* align-self не принимает левое и правое значения */
выровнять себя: по центру; /* Поместите элемент по центру */
выровнять себя: начать; /* Ставим элемент в начало */
выровнять себя: конец; /* Поместить элемент в конец */
align-self: самозапуск; /* Выравнивание элемента в начале */
выровнять себя: самоконец; /* Выровняйте элемент по краю */
выровнять себя: гибкий старт; /* Поместите flex-элемент в начало */
выравнивание: flex-end; /* Поместите flex-элемент в конец */
/* Базовое выравнивание */
выровнять себя: базовый уровень;
align-self: первая базовая линия;
align-self: последний базовый уровень;
выровнять себя: растянуть; /* Растянуть элементы с автоматическим размером, чтобы они соответствовали контейнеру */
/* Выравнивание переполнения */
align-self: безопасный центр;
align-self: небезопасный центр;
/* Глобальные значения */
выровнять себя: наследовать;
выровнять себя: начальный;
выровнять себя: вернуться;
выровнять себя: вернуть слой;
выровнять себя: не установлено;

Значения

авто

Вычисляет родительское значение align-items .

обычный

Эффект этого ключевого слова зависит от режима макета, в котором мы находимся:

  • В абсолютно позиционированных макетах ключевое слово ведет себя как start на заменяет абсолютно позиционированных блока и как растягивает на все остальные абсолютно позиционируемых блока.
  • В статической позиции абсолютно позиционированных макетов ключевое слово ведет себя как stretch .
  • Для гибких элементов ключевое слово ведет себя как stretch .
  • Для элементов сетки это ключевое слово приводит к поведению, аналогичному поведению stretch , за исключением полей с соотношением сторон или внутренними размерами, где оно ведет себя как start .
  • Свойство не применяется к блокам на уровне блоков и к ячейкам таблицы.
самозапуск

Выравнивает элементы, которые должны быть заподлицо с краем контейнера выравнивания, соответствующим начальной стороне элемента на поперечной оси.

самоконечный

Выравнивает элементы, которые должны быть заподлицо с краем контейнера выравнивания, соответствующим конечной стороне элемента на поперечной оси.

гибкий пуск

Край начального поля гибкого элемента совмещен с краем начального пересечения линии.

гибкий конец

Край поперечного поля гибкого элемента находится на одном уровне с краем поперечного конца линии.

центр

Поле поля гибкого элемента располагается по центру линии на поперечной оси. Если поперечный размер элемента больше, чем гибкий контейнер, он будет переполняться одинаково в обоих направлениях.

базовый уровень , первый базовый уровень , последний базовый уровень

Указывает участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего набора базовых линий блока с соответствующей базовой линией в общем первом или последнем наборе базовых линий всех блоков в его группе совместного использования базовых линий. Резервное выравнивание для first baseline равно start , выравнивание для last baseline равно end .

стрейч

Если объединенный размер элементов вдоль поперечной оси меньше размера контейнера выравнивания, а элемент имеет размер auto , его размер увеличивается одинаково (не пропорционально), при этом соблюдая ограничения, налагаемые max -height / max-width (или эквивалентная функциональность), чтобы суммарный размер всех элементов auto точно заполнил контейнер выравнивания по поперечной оси.

сейф

Если размер элемента выходит за пределы контейнера выравнивания, вместо этого элемент выравнивается, как если бы режим выравнивания был start .

небезопасно

Независимо от относительных размеров элемента и контейнера выравнивания, заданное значение выравнивания учитывается.

Исходное значение авто
Применимо к гибкие элементы, элементы сетки и блоки с абсолютным позиционированием
Унаследовано нет
Вычисляемое значение элементы на родительском элементе (за вычетом любых устаревших ключевых слов) на всех остальных полях или начинаются с , если у ящика нет родителя. Его поведение зависит от модели макета, как описано для justify-self . В противном случае указанное значение.
Тип анимации дискретный
 align-self = 
 auto | 
 обычный | 
 стрейч | 
 <базовая позиция> | 
 <позиция-переполнения>?  
 "> = 
 [ first | last ]? && 
 baseline 
 
 "> = 
 небезопасно | 
 safe 
 
 "> = 
 center | 
 start | 
 end | 
 self-start | 
 self-end | 
 flex-start | 
 flex-end

HTML 

 

  
Элемент №1

  
Элемент №2

  
Элемент №3

CSS 

 раздел {
  дисплей: гибкий;
  выравнивание элементов: по центру;
  высота: 120 пикселей;
  фон: бежевый;
}
дел {
  высота: 60 ​​пикселей;
  фон: голубой;
  поле: 5px;
}
div: n-й ребенок (3) {
  выравнивание: flex-end;
  фон: розовый;
}

Result

Specification
CSS Box Alignment Module Level 3
# align-self-property
CSS Flexible Box Layout Module Level 1
# align-items-property

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

  • Руководство CSS Flexbox: Основные понятия Flexbox
  • Руководство CSS Flexbox: Выравнивание элементов в гибком контейнере
  • Руководство по CSS Grid: Выравнивание блоков в макетах CSS Grid
  • Выравнивание блока CSS
  • Свойство align-items

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.

Хотите принять больше участия?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

Свойство CSS align-self

❮ Назад Полное руководство по CSS Далее ❯


Пример

Центрирование выравнивания для одного из элементов внутри гибкого элемента:

#myBlueDiv {
выровнять себя: по центру;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

The align-self 9Свойство 0005 указывает выравнивание в направлении блока для выбранного элемента внутри контейнера flexbox или сетки.

Для страниц на английском языке направление блока — вниз, а направление строки — слева направо.

Совет: Чтобы выровнять элемент сетки в линейном направлении вместо блочного, используйте свойства justify-self или justify-items .

Примечание: Свойство align-self переопределяет свойства сетки или гибкого контейнера. align-items свойство.

Показать демо ❯

Значение по умолчанию: авто
Унаследовано: нет
Анимация: нет. Читать о анимированном
Версия: CSS3
Синтаксис JavaScript: объект . style.alignSelf="center" Попробуй

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
самовыравнивание 57,0 16,0 52,0 10,1 44,0

Синтаксис CSS

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

Значения свойств

Значение Описание Играй
авто По умолчанию. Элемент наследует свойство align-items своего родительского контейнера или «растягивается», если у него нет родительского контейнера Демонстрация ❯
стрейч Элемент расположен так, чтобы соответствовать контейнеру Демонстрация ❯
центр Элемент расположен в центре контейнера Демонстрация ❯
гибкий пуск Элемент расположен в начале контейнера Демонстрация ❯
гибкий конец Элемент расположен в конце контейнера Демонстрация ❯
базовый уровень Элемент расположен на базовой линии контейнера Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Дополнительные примеры

align-self в макете сетки

Установить выравнивание в конце в направлении блока для одного элемента сетки с помощью свойства align-self:

#container {
  display: grid;
}

#myDiv {
  align-self: end;
}

Попробуйте сами »

Связанные страницы

Учебник CSS: CSS grid

Учебник CSS: CSS flexbox свойство self

Ссылка HTML DOM: свойство alignSelf

❮ Предыдущий Полное руководство по CSS Далее ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.

No related posts.