align-self

Базовая линия Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с сентября 2015 года.

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

Попробовать

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

Синтаксис

/* 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 */
align-self: anchor-center;

/* 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: revert;
align-self: revert-layer;
align-self: unset;

Значения

auto

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

normal

Эффект этого ключевого слова зависит от используемого метода компоновки:

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

self-start

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

self-end

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

flex-start

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

flex-end

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

center

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

baseline, first baseline, last baseline

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

stretch

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

anchor-center

В случае элементов с привязкой, выравнивает элемент по центру связанного элемента привязки по направлению блока. См. Центрирование на элементе привязки с помощью anchor-center.

safe

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

unsafe

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

Формальное определение

Начальное значение	`auto`
Применимо к	элементы гибкой компоновки, элементы сетки и абсолютно позиционированные элементы
Наследуется	нет
Вычисленное значение	`auto` вычисляется само по себе для абсолютно позиционированных элементов и как вычисленное значение `align-items` у родителя (за вычетом устаревших ключевых слов) для всех остальных элементов, или `start` если у элемента нет родителя. Его поведение зависит от модели компоновки, как описано для `justify-self`. В противном случае — указанное значение.
Тип анимации	дискретный

Формальный синтаксис

align-self = 
  auto                                  |
  normal                                |
  stretch                               |
  <baseline-position>                   |
  <overflow-position>? <self-position>  |
  anchor-center                         

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<overflow-position> = 
  unsafe  |
  safe    

<self-position> = 
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end

Примеры

HTML

<section>
  <div>Item #1</div>
  <div>Item #2</div>
  <div>Item #3</div>
</section>

CSS

section {
  display: flex;
  align-items: center;
  height: 120px;
  background: beige;
}

div {
  height: 60px;
  background: cyan;
  margin: 5px;
}

div:nth-child(3) {
  align-self: flex-end;
  background: pink;
}

Результат

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

Спецификация
CSS Box Alignment Module Level 3 # align-self-property
CSS Flexible Box Layout Module Level 1 # align-items-property

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`align-self`	2921	1212	2049	12.1	97	2925	2049	12.1	97	2.01.5	4.44.4
`anchor-center`	125	125	Нет	111	Нет	125	Нет	83	Нет	27.0	125
`flex_context`	36 21–36 Старые версии спецификации обрабатывают абсолютные позиционированные дочерние элементы так, как будто они являются flex-элементом размером 0 на 0. Более поздние версии спецификации выводят дочерние элементы из потока и устанавливают их позиции на основе свойств align и justify. Chrome реализует новое поведение, начиная с Chrome 52.	12	20 До Firefox 27 поддерживается только однострочный flexbox.	12.1	7	36 25–36 Старые версии спецификации обрабатывают абсолютные позиционированные дочерние элементы так, как будто они являются flex-элементом размером 0 на 0. Более поздние версии спецификации выводят дочерние элементы из потока и устанавливают их позиции на основе свойств align и justify. Chrome реализует новое поведение, начиная с Chrome 52.	20 До Firefox 27 поддерживается только однострочный flexbox.	12.1	7	3.0 1.5–3.0 Старые версии спецификации обрабатывают абсолютные позиционированные дочерние элементы так, как будто они являются flex-элементом размером 0 на 0. Более поздние версии спецификации выводят дочерние элементы из потока и устанавливают их позиции на основе свойств align и justify. Samsung Internet реализует новое поведение, начиная с Samsung Internet 6.0.	37 4.4–37 Старые версии спецификации обрабатывают абсолютные позиционированные дочерние элементы так, как будто они являются flex-элементом размером 0 на 0. Более поздние версии спецификации выводят дочерние элементы из потока и устанавливают их позиции на основе свойств align и justify. Chrome реализует новое поведение, начиная с Chrome 52.
`grid_context`	57	16	52	44	10.1	52	52	43	10.3	6.2	57
`position_absolute_context`	122	122	Нет	108	Нет	122	Нет	81	Нет	26.0	122

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/align-self