align-items

Властивість CSS align-items (шикувати елементи) задає значення align-self для всіх безпосередніх нащадків як єдиної групи. У Флексбоксі ця властивість контролює шикування елементів на перехресній осі. При сітковому компонуванні вона контролює шикування елементів на блоковій осі, в межах їхньої сіткової області.

Інтерактивний приклад нижче демонструє частину значень align-items при використанні сіткового компонування.

Спробуйте його в дії

Синтаксис

/* Базові ключові слова */
align-items: normal;
align-items: stretch;

/* Позиційне шикування */
/* align-items не приймає значення left і right */
align-items: center;
align-items: start;
align-items: end;
align-items: flex-start;
align-items: flex-end;
align-items: self-start;
align-items: self-end;

/* Шикування за базовою лінією */
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* Шикування переповнення (лише для позиційного шикування) */
align-items: safe center;
align-items: unsafe center;

/* Глобальні значення */
align-items: inherit;
align-items: initial;
align-items: revert;
align-items: revert-layer;
align-items: unset;

Значення

normal

Дія цього ключового слова залежить від активного способу компонування:

  • При компонуванні з абсолютним позиціонуванням – поводиться як start у заміщених блоках з абсолютним позиціонуванням і як stretch у всіх інших блоках з абсолютним позиціонуванням.
  • При статичному позиціонуванні при компонуванні з абсолютним позиціонуванням – поводиться як stretch.
  • Для гнучких елементів – поводиться як stretch.
  • Для сіткових елементів – призводить до логіки, подібної до логіки stretch, окрім блоків зі співвідношенням сторін чи природними розмірами, для яких це ключове слово поводиться як start.
  • Ця властивість не застосовується до елементів блокового рівня, а також до комірок таблиць.
flex-start

Використовується лише при гнучкому компонуванні, шикує гнучкі елементи врівень з початковим краєм гнучкого контейнера за головною чи перехресною віссю.

flex-end

Використовується лише при гнучкому компонуванні, шикує гнучкі елементи врівень з кінцевим краєм гнучкого контейнера за головною чи перехресною віссю.

center

Рамки полів гнучких елементів центруються в межах шеренги на перехресній осі. Якщо перехресний розмір елемента перевищує розмір гнучкого контейнера, то такий елемент рівномірно вийде за межі контейнера з обох боків.

start

Елементи нагромаджуються врівень одне до одного у напрямку до початкового краю контейнера шикування за відповідною віссю.

end

Елементи нагромаджуються врівень одне до одного у напрямку до кінця контейнера шикування за відповідною віссю.

self-start

Елементи нагромаджуються врівень до краю з початкового боку елемента контейнера шикування, за відповідною віссю.

self-end

Елементи нагромаджуються врівень до краю з кінцевого боку елемента контейнера шикування, за відповідною віссю.

baseline, first baseline, last baseline

Усі гнучкі елементи шикуються так, що їхні базові лінії гнучкого контейнера збігаються. Елемент з найбільшою відстанню між його перехресно-початковим зовнішнім краєм та його базовою лінією стає врівень з перехресно-початковим краєм шеренги.

stretch

Якщо елементи менші за контейнер шикування, то елементи з автоматичним розміром рівномірно розтягуються, щоб заповнити контейнер, з урахуванням обмежень на ширину та висоту елементів.

safe

Використовуються вкупі з ключовим словом шикування. Якщо обране ключове слово означає, що елемент виходить за межі контейнера шикування, призводячи до втрати даних, то елемент замість цього шикується так, ніби спосіб шикування – start.

unsafe

Використовується вкупі з ключовим словом шикування. Незалежно від відносних розмірів елемента й контейнера шикування, а також того, чи може відбутися вихід за межі зі втратою даних, виконується задане значення шикування.

Формальне визначення

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

normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]

де
<baseline-position> = [ first | last ]? baseline
<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end

Приклади

CSS

#container {
  height: 200px;
  width: 240px;
  align-items: center; /* Може бути змінено в живому зразку */
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}

HTML

<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-items: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="baseline">baseline</option>
    <option value="stretch">stretch</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="self-start">self-start</option>
    <option value="self-end">self-end</option>

    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe self-end">safe self-end</option>
    <option value="unsafe self-end">unsafe self-end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>

Результат

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

Якщо ви це бачите — значить, щось трапилося з цією сторінкою.

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
Supported in Flex Layout Chrome Full support 52
Edge Full support 12
Firefox Full support 20
footnote
Internet Explorer Full support 11
footnote
Opera Full support 12.1
Safari Full support 9
WebView Android Full support 52
Chrome Android Full support 52
Firefox for Android Full support 20
footnote
Opera Android Full support 12.1
Safari on iOS Full support 9
Samsung Internet Full support 6.0
baseline
Chrome Full support 21
Edge Full support 79
Firefox Full support 28
Internet Explorer No support No
Opera Full support 44
Safari Full support 7
WebView Android Full support 57
Chrome Android Full support 25
Firefox for Android Full support 28
Opera Android Full support 43
Safari on iOS Full support 7
Samsung Internet Full support 7.0
first baseline
Chrome Full support 59
Edge Full support 79
Firefox Full support 52
Internet Explorer No support No
Opera Full support 46
Safari Full support 11
WebView Android Full support 59
Chrome Android Full support 59
Firefox for Android Full support 52
Opera Android Full support 43
Safari on iOS Full support 11
Samsung Internet Full support 7.0
last baseline
Chrome No support 59 –  86
footnote
Edge No support 79 –  86
footnote
Firefox Full support 52
Internet Explorer No support No
Opera Full support 46
Safari Partial support 11
footnote
WebView Android Full support 59
Chrome Android No support 59 –  86
footnote
Firefox for Android Full support 52
Opera Android Full support 43
Safari on iOS Partial support 11
footnote
Samsung Internet Full support 7.0
safe and unsafe
Chrome No support No
footnote
Edge No support No
footnote
Firefox Full support 63
Internet Explorer No support No
Opera No support No
footnote
Safari No support No
footnote
WebView Android No support No
footnote
Chrome Android No support No
footnote
Firefox for Android Full support 63
Opera Android No support No
footnote
Safari on iOS No support No
footnote
Samsung Internet No support No
footnote
start and end
Chrome Full support 93
Edge Full support 93
Firefox Full support 45
Internet Explorer No support No
Opera Full support 79
footnote
Safari No support No
WebView Android Full support 93
Chrome Android Full support 93
Firefox for Android Full support 45
Opera Android No support No
Safari on iOS No support No
Samsung Internet Full support 17.0
Supported in Grid Layout Chrome Full support 57
Edge Full support 16
Firefox Full support 52
Internet Explorer No support No
Opera Full support 44
Safari Full support 10.1
WebView Android Full support 57
Chrome Android Full support 52
Firefox for Android Full support 52
Opera Android Full support 43
Safari on iOS Full support 10.3
Samsung Internet Full support 6.2
start and end
Chrome Full support 57
Edge Full support 79
Firefox Full support 52
Internet Explorer No support No
Opera Full support 44
Safari Full support 11
WebView Android Full support 57
Chrome Android Full support 57
Firefox for Android Full support 52
Opera Android Full support 43
Safari on iOS Full support 11
Samsung Internet Full support 7.0

Дивіться також