Css align items: align-items — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

Содержание

align-items | CSS | WebReference

  • Содержание
    • Краткая информация
    • Синтаксис
    • Значения
    • Песочница
    • Пример
    • Примечание
    • Спецификация
    • Браузеры

Свойство align-items выравнивает флекс-элементы внутри контейнера в перпендикулярном направлении.

Значение по умолчаниюstretch
НаследуетсяНет
ПрименяетсяК флекс-контейнеру
АнимируетсяНет

Синтаксис 

align-items: flex-start | flex-end | center | baseline | stretch

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).
normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

ЗначениеПоложениеОписание
flex-startФлексы выравниваются в начале поперечной оси контейнера.
centerФлексы выравниваются по линии поперечной оси.
flex-endФлексы выравниваются в конце поперечной оси контейнера.
stretchФлексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.
baselineФлексы выравниваются по их базовой линии.

Песочница

flex-start flex-end center baseline stretch

div {
  display: flex;
  align-items: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>align-items</title> <style> .flex-container { display: flex; align-items: stretch; /* Растягиваем */ } .flex-item { margin-left: 1rem; /* Расстояние между блоков */ padding: 10px; /* Поля вокруг текста */ width: 33.333%; /* Ширина блоков */ } .
flex-item:first-child { margin-left: 0; } .item1 { background: #F0BA7D; } .item2 { background: #CAE2AA; } .item3 { background: #A6C0C9; } </style> </head> <body> <div> <div> Фенек — лисица, живущая в пустынях Северной Африки. Имеет достаточно миниатюрный размер и своеобразную внешность с большими ушами. </div> <div> Корсак — хищное млекопитающее рода лисиц. </div> <div> Лисица — хищное млекопитающее семейства псовых, наиболее распространённый и самый крупный вид рода лисиц. </div> </div> </body> </html>

Результат данного примера показан на рис. 1. За счёт использования значения stretch у атрибута align-items блоки получаются одинаковой высоты, несмотря на разное содержимое.

Рис. 1. Блоки одинаковой высоты

Объектная модель

Объект.style.alignItems

Примечание

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

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

СпецификацияСтатус
CSS Flexible Box Layout Module Level 1Возможная рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

11132912.16.1928
4.42812.17.19.2

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

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

Флексы

См. также

  • Выравнивание с помощью флексбоксов
  • Свойства flex-контейнера
  • Создание медиа-объектов
  • Точки между слов

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 24.04.2020

Редакторы: Влад Мержевич

Свойство align-items — выравнивание по поперечной оси

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

Синтаксис

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

Значения

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

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

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

Сейчас главная ось направлена слева направо, а по поперечной оси элементы растянуты на всю высоту:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>#parent { display: flex; align-items: stretch; flex-direction: row; border: 1px solid #696989; } #parent > div { border: 1px solid #696989; }

:

Пример .

Значение stretch + размеры элемента

Сейчас для элементов задана ширина и высота, поэтому значение stretch

для свойства align-items будет проигнорировано:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>#parent { display: flex; align-items: stretch; flex-direction: row; border: 1px solid #696989; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Пример . Значение flex-start без размеров элемента

Сейчас элементы будут прижаты к верху:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>#parent { display: flex; align-items: flex-start; flex-direction: row; border: 1px solid #696989; } #parent > div { border: 1px solid #696989; }

:

Пример .

Значение flex-start + размеры элемента

Сейчас элементы по прежнему будут прижаты к верху, однако у них будет заданная ширина и высота:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>#parent { display: flex; align-items: flex-start; flex-direction: row; border: 1px solid #696989; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Пример . Значение flex-end + размеры элемента

Сейчас элементы будут прижаты к низу:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>

#parent { display: flex; align-items: flex-end; flex-direction: row; border: 1px solid #696989; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Пример .

Значение center + размеры элемента

Сейчас элементы будут стоять по центру по поперечной оси (в данном случае по вертикали):

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>#parent { display: flex; align-items: center; flex-direction: row; border: 1px solid #696989; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Пример . Значение center, элементы разного размера

Сейчас элементы имеют разный размер по высоте (сейчас они раздвигаются текстом, но можно задать и height), ширина у всех одинаковая, так как задано свойство width:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>#parent { display: flex; align-items: center; flex-direction: row; border: 1px solid #696989; } #parent > div { width: 100px; border: 1px solid #696989; }

:

Пример .

Значение baseline, элементы разного размера

А вот так выглядит выравнивание по базовой линии align-items: baseline:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>#parent { display: flex; align-items: baseline; flex-direction: row; border: 1px solid #696989; } #parent > div { width: 130px; line-height: 1; border: 1px solid #696989; }

:

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

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

Свойства для выравнивания всего и их новые тайны — CSS-LIVE

Если вы освоили флексбоксы (а кто не освоил их за последние два-три года?), для вас давно не проблема отцентрировать что угодно, да и вообще выровнять как угодно. Вам давно знакомы «волшебные» свойства justify-content, align-content, align-items и align-self, и что делает каждое из их значений (не обязательно помнить их все наизусть, ведь всегда можно подсмотреть в шпаргалке или наглядном справочнике:). Но всё ли вы знаете про эти свойства? Что если я скажу вам, что их могущество не ограничено флексбоксами? И что вы видели лишь часть их значений? И что самих этих свойств не 4, а в два с лишним раза больше? Если хотите овладеть всей их мощью, узнать, причем тут новомодная грид-раскладка (CSS Grid Layout), и вас не страшат дебри спецификаций — добро пожаловать в эту статью, где я покажу вам, насколько глубока кроличья нора W3C.

CSS-гриды упомянуты не случайно: лучше сразу вооружитесь одним из браузеров, где они уже работают (Firefox 52+, Chrome 57+, Opera 44+ или Safari 10.1+/iOS 10.3+ Safari), чтобы увидеть примеры во всем их блеске.

Не только флексбоксы

В недавней статье про новые возможности флексбоксов и CSS-гридов, когда они работают в связке, был короткий пример со свойством align-self (и еще одним, но о нем чуть позже) для ячеек грида. А ниже — интерактивный пример, где вы можете сами сравнить действие всех четырех знакомых свойств в двух контейнерах с разными контекстами форматирования — флексбоксовом и гридовом:

See the Pen evKEMK by Ilya Streltsyn (@SelenIT) on CodePen.

Видите общий принцип?

Свойство justify-content определяет, что делать со свободным местом, оставшимся после размещения всего контента по горизонтали (точнее, по главной оси, зависящей от свойства flex-direction, для флексбоксов, и по строчной оси, зависящей от направления текста, для гридов — но пока ограничимся простым случаем, как в примере). Оставить ли это место в конце строки (по умолчанию), переместить в начало (прижав контент к концу), раскидать поровну справа и слева от контента (тем самым отцентрировав его), раскидать поровну между элементами и т. д. Единственная разница, что в гриде элементы сгруппированы еще и по вертикали (по столбцам), поэтому и место поневоле распределяется именно между столбцами, а не самими элементами, как у флексбоксов.

A align-content делает по сути то же самое, но по вертикали (точнее, по перпендикулярной оси для флексбоксов и по блочной оси для гридов, если совсем занудствовать). Здесь в обоих случаях контент у нас уже сгруппирован — в строки (во флексбоксах) или ряды (в гриде). И свободное место по вертикали может быть после всех этих строк/рядов, перед ним, поровну до и после них (и тогда они будут по центру), поровну между ними… Во флексбоксах (где, в отличие от гридов, нет ячеек с явными размерами) можно еще и равномерно растянуть высоту этих строк/рядов так, что свободного места не останется вообще.

Другими словами: свойства *-content управляют всем контентом сразу, передвигая и раздвигая (если надо) то, во что этот контент сгруппирован: строки, ряды или колонки.

Ну а align-items выравнивает именно «items», т.е. элементы — внутри строк флексбокса и рядов грида. А align-self — то же самое, но для каждого элемента в отдельности, и указывается для него самого. Первый задает поведение элементов по умолчанию, второй позволяет его переопределить.

Но как выравнивать элементы — все (по умолчанию) или некоторые по отдельности — по горизонтали, внутри колонок грида?

Целых девять свойств

Оказывается, для каждого объекта выравнивания — всего контента, всех элементов по умолчанию и отдельного элемента, его самого — есть пара свойств, одно из которых выравнивает по главной/строчной оси (в нашем примере — по горизонтали), а второе — по поперечной/блочной (в нашем примере — по вертикали). Получается 6 свойств — все комбинации из двух вариантов, по какой оси выравнивать, и трех — что именно выравнивать (контент, элементы или сам конкретный элемент). Вот они:

  • align-content
  • justify-content
  • align-items
  • justify-items
  • align-self
  • justify-self

See the Pen qrYobV by Ilya Streltsyn (@SelenIT) on CodePen.

В примере выше вы можете увидеть все 6 свойств в действии в гридах. Во флексбоксах работают только 4 наших старых знакомых: выравнивать отдельные элементы по главной оси там бессмысленно, поскольку всем пространством между ними уже заведует justify-content, и распределять после него уже нечего.

Но писать целых два свойства для выравнивания каждого объекта долго, нельзя ли как-нибудь покороче? Не так давно (в конце осени 2016-го) рабочая группа CSS задалась тем же вопросом и решила ввести для каждой пары align-что-то/justify-что-то сокращенную запись. Над ее названием долго ломали голову и спорили, но в итоге победил вариант place-что-то.

Так что в придачу к тем шести свойствам теперь есть еще три:

  • place-content
  • place-items
  • place-self

Значение каждого из них — комбинация значений align-* и justify-* через пробел. Например, place-content: center space-between или place-self: stretch center. Порядок (сначала вертикальное выравнивание, потом горизонтальное) соответствует порядку, в котором указываются, например, отступы (в записях типа margin: 20px auto). Если указано только одно значение (например, place-items: start), оно копируется для обеих составляющих, по обеим осям.

Все 9 свойств уже работают, как минимум, в новых Firefox (52+). В Chrome до Canary 59 включительно сокращенные свойства (place-*) не работали, но (добавлено 25.05.2017) в Canary 60 они уже поддерживаются (хоть иногда и со странностями).

Куча новых значений

Если вы внимательно рассмотрели предыдущий пример, вас могли удивить некоторые значения для свойств выравнивания. Они действительно новые, и о них стоит рассказать отдельно.

start и end

Во флексбоксах мы привыкли к значениям flex-start и flex-end, зависящим от направления главной и поперечной осей — которые, в свою очередь, зависят от направления текста. Просто start и end — почти то же самое: начало/конец строки или блока (ряда или колонки) соответственно, в зависимости от направления текста. Для строки/ряда при письме слева направо start — это левый край, end — правый. При письме справа налево — наоборот. При вертикальном письме сверху вниз, соответственно, start — это верх, end — низ. И так далее.

На практике разница между start/end и flex-start/flex-end лишь в том, что первые, в отличие от вторых, не учитывают «переворота» осей в ситуациях типа flex-flow: row-reversed wrap-reversed. А в гридах они вообще по сути синонимы.

В Firefox эти значения уже работают и для флексбоксов, и для гридов, в Chrome — пока только для гридов.

self-start и self-end (для *-items и *-self)

Эти два значения хочется назвать «еще более относительными», чем просто start и end: они выравнивают флекс- и грид-элементы с учетом их собственного направления текста. Например, если в одних ячейках грида текст идет слева направо, а в других — справа налево (скажем, это русско-арабский словарь), то при justify-items: self-start содержимое первых прижмется к левому краю, а вторых — к правому. Вы могли видеть это в примерах выше — для предпоследнего элемента в каждом контейнере, выделенного зеленым цветом .

left и right

Предполагались для случая, когда, хоть и редко, возникает необходимость выровнять что-то и абсолютно, по правому/левому краю, независимо от направления текста. Как эти свойства должны работать для вертикального выравнивания (и нужны ли они там вообще), редакторы спецификации пока не определились (на 9. 01.2018).

space-evenly (для *-content)

В переводе шпаргалки Джони Трайтел нам в своё время пришлось исправить одну неточность (в оригинале она осталась до сих пор, была она поначалу и в статье Криса Койера, от которой Джони отталкивалась). Для space-around было нарисовано, будто промежутки между элементами и от краев контейнера до крайних элементов равны друг другу:

Именно такого результата интуитивно ожидали многие (включая меня), и фактический результат space-around (промежутки между элементами вдвое шире, чем от краев) неприятно удивил. А равных промежутков до сих пор приходилось добиваться нетривиальными хаками — либо с помощью space-between и ::before c ::after, либо нетипичным применением margin: auto. И то лишь для однострочных флексбоксов.

И вот наконец у свойств justify-content и align-content появилось новое значение space-evenly, которое делает эти промежутки равными без всяких ухищрений. Хоть в однострочном флексбоксе, хоть в многострочном, хоть в гриде. Хоть по горизонтали, хоть по вертикали. И это уже работает в браузерах: в Firefox — полностью, в Chrome — пока только для гридов (добавлено 25.05.2017: но это был баг, и буквально позавчера его пофиксили! И в Safari тоже). Добавлено 24.07.2017: в Chrome Canary 62 это значение уже работает полноценно. Добавлено 10.08.2017: в стабильном Chrome 60 тоже!

first baseline и last baseline

Выравнивание по базовой линии издавна было сложной темой в CSS, даже величайшим мастерам порой приходилось вести с ним целые битвы. Особенно удивляло, что одни элементы — напр., инлайн-блоки — выравнивались по базовой линии последней строки, а другие — напр., инлайн-таблицы — по первой. Теперь этим можно управлять явно. Для этого перед ключевым словом baseline можно указывать другое слово-модификатор — first или last.

Обратите внимание: модификатор указывается именно через пробел, не через дефис, так что значение свойства получается составным, из двух слов. Из-за этого пробела чуть не возникла путаница с сокращенными значениями (как понимать, например, place-self:first baseline: как непонятное выравнивание first по одной оси и выранивание по базовой линии по другой или как выравнивание по базовой линии по обеим осям?), было даже предложение заменить в сокращенных значениях пробел слешем, но в итоге оставили пробел. Так что будьте внимательны!

(добавлено 25.05.2017) ключевые слова safe и unsafe

Их я пока не смог увидеть в действии ни в одном браузере, поэтому поначалу даже не хотел добавлять в статью. Но придется:)

Возможно, при центрировании элементов в резиновом флекс-контейнере вы сталкивались с такой неприятной особенностью: если контейнер становится меньше элемента, то оба края элемента начинают выступать за края контейнера. И если контейнер — это страница, то часть контента может уйти за ее левый/верхний край и стать недоступной. С этим и борется ключевое слово safe: если добавить его перед center (например, align-items: safe center;), то элемент будет центрироваться в контейнере лишь тогда, когда он там умещается. Если же он переполняет контейнер, то «лишние» части будут выступать лишь вправо и вниз (для привычного нам направления письма), где до них хотя бы можно будет добраться скроллингом. Примерно так, как ведут себя элементы при центрировании через margin: auto. Которое, кстати, и имитирует это поведение в примере ниже:

See the Pen OmqGKY by Ilya Streltsyn (@SelenIT) on CodePen.

Есть и противоположное ключевое слово unsafe — всегда выравнивать/центрировать элемент так, как указано, неважно, куда и насколько при этом выступают «излишки». А по умолчанию, по текущему черновику, должно происходить что-то среднее — элемент должен выравниваться как указано, но при появлении скроллинга он весь должен быть доступен для него (но там оставлена оговорка: если браузеры не осилят такое «умное» поведение — пусть делают unsafe:).

normal, auto и ключевое слово legacy

Как часто бывает в CSS, значения с названиями типа normal и auto оказываются самыми запутанными:). «Нормальное» поведение наших свойств для выравнивания всего зависит от конкретного способа форматирования, от унаследованных значений (модификатор legacy как раз влияет на то, будут ли эти унаследованные значения учитываться), и я даже не стал добавлять их в примеры (где было можно), чтоб совсем уж вас не запутать. Если захотите, разобраться подробнее с каждым из них вы сможете непосредственно в спецификации (см. ниже). К счастью, и во флексбоксах, и в гридах общий принцип поведения по умолчанию довольно прост: что можно — попытаться растянуть (stretch), остальное — прижать к началу соответствующей оси (start).

Целый модуль спецификации (CSS Box Alignment)

Свойства для выравнивания всего оказались настолько важны, что для них уже давно завели отдельный модуль спецификации: CSS Box Alignment Module Level 3. Работа над ним еще не завершена, но в официальном определении современного CSS (известном как «CSS-2017») он назван в числе «теоретически проработанных и вполне стабильных» (хоть и нуждается в дальнейших тестах и опыте внедрения). А актуальная его версия со всеми новейшими правками (текущий редакторский черновик) здесь: https://drafts.csswg.org/css-align/.

Модуль немаленький по объему и язык в нем, прямо скажем, не самый простой. Чтобы просто понять, какие значения могут быть у каждого свойства, приходится побегать по перекрестным ссылкам: что такое, например, «<self-position>» и чем оно отличается от «<content-position>»? Ответ — то, что среди значений для выравнивания отдельных элементов, в отличие от значений для выравнивания групп, есть наши новые знакомые self-start и self-end — вполне логичен, но, чтобы понять эту логику, надо как следует вчитаться! Неудивительно, что по этому модулю до сих пор немало открытых ишью. Так что советую поизучать его повнимательнее — вдруг именно от вас не ускользнет какая-нибудь важная неточность, а то и возможность переформулировать что-нибудь попроще и пояснее?

Но самый главный сюрприз, который скрывает в себе этот модуль — то, что свойства для выравнивания всего не ограничиваются одними лишь флексбоксами и гридами: в теории, они должны будут работать для многоколоночных раскладок (кстати, совсем недавно браузеры — Chrome с 55-й версии, Firefox c 52-й — наконец убрали префиксы для колоночных свойств!) и… барабанная дробь… для обычных блоков! Так что, если я ничего не перепутал, align-content: center должно стать стандартным решением легендарной проблемы вертикального центрирования произвольного контента. К сожалению, для justify-content для блоков явным образом прописано, что применяться оно не будет (эх, придется и дальше неинтуитивно центрировать margin-ами…), но для align-content, в теории, надежда остается! В теории — потому что в браузерах (ни в FIrefox, ни в Chrome Canary) это пока, судя по всему, не работает.

Вообще браузерная поддержка свойств для выравнивания всего — больная тема: на CanIUse отдельной закладки для CSS Box Alignment нет, в MDN, хоть информация о поддержке разных значений на удивление подробная, упоминаются они пока лишь в контексте флексбоксов. Так что, видимо, единственный способ узнать всё обо всех нюансах этих могучих свойств во всех, включая самые неожиданные, ситуациях — это экспериментировать, экспериментировать и еще раз экспериментировать (держа перед глазами спецификацию и, если надо, спрашивая обо всём непонятном прямо у ее редакторов на гитхабе:). Так что жду в комментариях поправок и уточнений ко всему, что я упустил (я ведь даже не все возможные значения перечислил), и, разумеется, ваших собственных открытий. И да пребудет с вами сила CSSпецификаций!

P.S. Это тоже может быть интересно:

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

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


Пример

Выравнивание по центру всех элементов гибкого элемента

:

div {
  дисплей: гибкий;
  align-items: center;
}

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

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

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

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

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

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

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

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

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

Цифры, за которыми следует -webkit-, указывают первую версию, которая работала с префиксом.

Собственность
элементы выравнивания 21,0 11,0 20,0 9. 0
7.0 -вебкит-		 12.1

Синтаксис CSS

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

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

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

Другие примеры

Пример

Элементы расположены в начале контейнера:

div {
  display: flex;
  align-items: flex-start;
}

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

Пример

Элементы располагаются в конце контейнера:

div {
  display: flex;
  align-items: flex-end;
}

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

Пример

Элементы расположены на базовой линии контейнера:

div {
  display: flex;
  align-items: базовый уровень;
}

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

Пример

Элементы растягиваются по размеру контейнера:

div {
  display: flex;
  align-items: растянуть;
}

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

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

Справочник CSS: свойство align-content

Справочник CSS: свойство align-self

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

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


NEW

Мы только что запустили
видео W3Schools

Узнать

ПАЛЕТКА ЦВЕТОВ
КОД ИГРЫ

Играть в игру

Top Tutorials
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

элементов выравнивания | CSS-Tricks — CSS-Tricks

Свойство align-items связано с компоновкой CSS. Это влияет на то, как элементы выравниваются как в макетах Flexbox, так и в макетах Grid.

 .контейнер {
  дисплей: гибкий;
  выравнивание элементов: flex-start;
}
  • align-items во Flexbox
  • align-items в Grid

Синтаксис 

 align-items: flex-start | гибкий конец | центр | базовый | протяжение

Элементы выравнивания 9Свойство 0023 определяет поведение по умолчанию для размещения элементов вдоль поперечной оси (перпендикулярно главной оси).

Представьте себе горизонтальную раскладку flexbox. Этот горизонтальный поток является главной осью, поэтому align-items — это выравнивание, противоположное этому, по вертикальной оси. Имейте в виду, что меняется при изменении главной оси, а вместе с ней меняется и поперечная ось.

Вы можете думать о align-items как о версии justify-content для поперечной оси (перпендикулярно главной оси).

Остальная часть этой статьи посвящена флексбоксу, а не сетке. Понятия все еще очень похожи, но есть некоторые различия. Например, во флексбоксе оси могут меняться, а в сетке — нет. Это влияет на такие вещи, как flexbox, имеющие такие значения, как flex-start , где в сетке это просто start .

Свойство align-items принимает 5 различных значений:

  • flex-start : кромка поля пересечения начала элементов помещается на линию пересечения начала
  • flex-end : поперечный край элементов помещается на поперечную линию
  • центр : элементы центрируются по поперечной оси
  • базовая линия baselines align
  • stretch ( default ): растянуть для заполнения контейнера (при этом учитывать минимальную ширину/максимальную ширину)

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

с w3.org

Demo

Следующая демонстрация показывает, как flex-элементы располагаются в зависимости от значения align-items :

  • Красный список установлен на flex-start
  • Желтый список установлен to flex-end
  • Синий список настроен на center
  • Зеленый список установлен на baseline
  • Розовый список установлен на stretch
    • 900 Поддержка 900 Браузер0006

    Поддержка браузером align-items зависит от его использования с flexbox и CSS Grid.

    Flex layout
    IE Edge Chrome Firefox Safari Opera
    11 All 21-51 1
    51+    		 20+ 7-8 1
    9+    		 12. 1+
    iOS Safari Android Chrome Android Firefox Android Browser Opera Mobile
    7-8.4 1
    9+    		 All All 92+ 12,1+
    Источник: Caniuse

    1 Поддерживается префиксом -WEBKIT -

    .0037
    Edge Firefox Chrome Safari Opera All 16+ 52+ 57+ 10. 1+ 44+ 9039+ 9.03942
  • 5
  • 5
    • iOS Safari Android Chrome Android Firefox Браузер Android Opera Mobile
    All All All 64+
    Source: caniuse

    More information

    • CSS Flexible Box Layout Module Level 1
    • MDN documentation
    • Advanced cross-browser flexbox
    • CSS-Tricks Flexbox Guide
    • Использование Flexbox
    • Старый Flexbox и новый Flexbox

    «Старый» Flexbox и «Новый» Flexbox

    Быстрый способ запомнить разницу между `justify-content` и `align-items`

    Достижение вертикального выравнивания (спасибо, Subgrid!)

    Адаптивный макет фотографий с помощью Flexbox

    Центрирование в CSS: полное руководство

    выравнивание содержимого

    .element { align-content: space-around; }

    выравнивание содержимого flexbox

    flex-направление

    .element { flex-direction: column-reverse; }

    гибкий поток

    .element { flex-flow: перенос строк; }

    гибкая упаковка

    выравнивание содержания

    .element { justify-content: center; }

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

    ❮ Пред. Следующий ❯

    Свойство CSS align-items указывает выравнивание по умолчанию для flex-элементов. Оно похоже на свойство justify-content, но имеет вертикальную версию.

    Это свойство является одним из свойств CSS3.

    Свойство align-items принимает следующие значения:

    • stretch
    • гибкий пуск
    • центр
    • гибкий конец
    • базовый уровень
     align-items: растянуть | центр | гибкий старт | гибкий конец | базовый | начальная | наследовать;

    Пример свойства align-items: 

     

  <голова>
    Название документа
    <стиль>
      #пример {
        ширина: 220 пикселей;
        высота: 300 пикселей;
        заполнение: 0;
        граница: 1px сплошная #000;
        отображение: -webkit-flex;
        /* Сафари */
        -webkit-align-items: растянуть;
        /* Сафари 7. 0+ */
        дисплей: гибкий;
        выравнивание элементов: растянуть;
      }
      #пример
        -вебкит-флекс: 1;
        /* Сафари 6.1+ */
        гибкий: 1;
        стиль списка: нет;
      }
    
  
  <тело>
     
    Выровнять элементы: растянуть; пример
     
    <ул>
      
  • Зеленый
    • 
      
  • Синий
    • 
      
  • Серый
    •

Попробуй сам "

Результат

В следующем примере элементы располагаются в центре контейнера.

Пример свойства align-items со значением «center»: 

 

  <голова>
    Название документа
    <стиль>
      #пример {
        ширина: 220 пикселей;
        высота: 300 пикселей;
        заполнение: 0;
        граница: 1px сплошная #000;
        отображение: -webkit-flex;
        /* Сафари */
        -webkit-align-items: по центру;
        /* Сафари 7.0+ */
        дисплей: гибкий;
        выравнивание элементов: по центру;
      }
      #пример
        -вебкит-флекс: 1;
        /* Сафари 6. 1+ */
        гибкий: 1;
        стиль списка: нет;
      }
    
  
  <тело>
     
Выровнять элементы: по центру; пример
 
    <ул>
      
  • Зеленый
    • 
      
  • Синий
    • 
      
  • Серый
    •

    Попробуй сам "

    В следующем примере элементы размещаются в начале.

    Пример свойства align-items со значением "flex-start": 

     

  <голова>
    Название документа
    <стиль>
      #пример {
        ширина: 220 пикселей;
        высота: 300 пикселей;
        заполнение: 0;
        граница: 1px сплошная #000;
        отображение: -webkit-flex;
        /* Сафари */
        -webkit-align-items: flex-start;
        /* Сафари 7.0+ */
        дисплей: гибкий;
        выравнивание элементов: flex-start;
      }
      #пример
        -вебкит-флекс: 1;
        /* Сафари 6.1+ */
        гибкий: 1;
        стиль списка: нет;
      }
    
  
  <тело>
     
    Выравнивание элементов: flex-start; пример
     
    <ул>
      
  • Зеленый
    • 
      
  • Синий
    • 
      
  • Серый
    •

    Попробуй сам "

    Здесь мы применяем значение "flex-end", которое помещает элементы в конец контейнера.

    Пример свойства align-items со значением "flex-end": 

     

  <голова>
    Название документа
    <стиль>
      #пример {
        ширина: 220 пикселей;
        высота: 300 пикселей;
        заполнение: 0;
        граница: 1px сплошная #000;
        отображение: -webkit-flex;
        /* Сафари */
        -webkit-align-items: flex-end;
        /* Сафари 7.0+ */
        дисплей: гибкий;
        элементы выравнивания: flex-end;
      }
      #пример
        -вебкит-флекс: 1;
        /* Сафари 6.1+ */
        гибкий: 1;
        стиль списка: нет;
      }
    
  
  <тело>
     
    Выравнивание элементов: flex-end; пример
     
    <ул>
      
  • Зеленый
    • 
      
  • Синий
    • 
      
  • Серый
    •

    Попробуй сам "

    Давайте посмотрим на наш последний пример со значением «базовая линия», которое помещает элементы в базовую линию контейнера.

    Пример свойства align-items с "базовым" значением: 

     

  <голова>
    Название документа
    <стиль>
      #пример {
        ширина: 220 пикселей;
        высота: 300 пикселей;
        заполнение: 0;
        граница: 1px сплошная #000;
        отображение: -webkit-flex;
        /* Сафари */
        -webkit-align-items: базовый уровень;
        /* Сафари 7. 0+ */
        дисплей: гибкий;
        элементы выравнивания: базовый уровень;
      }
      #пример
        -вебкит-флекс: 1;
        /* Сафари 6.1+ */
        гибкий: 1;
        стиль списка: нет;
      }
    
  
  <тело>
     
    Выравнивание элементов: базовый уровень; пример
     
    <ул>
      
  • Зеленый
    • 
      
  • Синий
    • 
      
  • Серый
    •

    Попробуй сам "

    Результат

    Практикуйте свои знания

    Свойство align-items принимает следующие значения, кроме:

    протяжение гибкий старт пространство между центр гибкий конец

    Успех!

    Неверно! Ты не правильно понял!

    УСС | Свойство align-items - GeeksforGeeks

    Посмотреть обсуждение

    Улучшить статью

    Сохранить статью

    • Последнее обновление: 01 авг, 2022

  • Читать
  • Обсудить

    • Посмотреть обсуждение

    Улучшить статью

    Сохранить статью

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

    Синтаксис: 

     align-items: normal|start|end|self-start|self-end
    |базовая линия, первая базовая линия, последняя базовая линия|растяжение
    |center|flex-start|flex-end|базовый уровень|безопасный|небезопасный
    |начальный|наследовать;

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

    • растяжение

    Значение свойства: растяжение: Элементы растягиваются по размеру контейнера, и это значение по умолчанию.

    Синтаксис: 

     align-items: stretch;

    Example:  

    javascript

     

         </code></p><p data-readability-styled="true"> <code> </code> <code> CSS | align-items Свойство </code></p><p data-readability-styled="true"> <code>      </code> <code>

        

    <Тело>

    <Центр>

    1. > Geeksforgeeks

    «растяжение» >

    >

    Purple

    "Фонодок: Желто >

                    Yellow

                

            

     

        

    ОБЪЕКТ: 9003

    . емкости вертикально.

    Синтаксис: 

     align-items: center;

    Пример:  

    javascript

    <Голова>

    CSS | align-items Property

        

        

    <Тех0022     

            

    "color:green;" > Geeksforgeeks

    "Центр" >

    >

                  Фиолетовый

                

                

    "background-color:Yellow;" >

                   Yellow

                

            

     

        

     

    Вывод:

     

    flex-start: Элементы будут расположены в начале контейнера.

    Синтаксис: 

     align-items: flex-start;

    Example:  

    javascript

     

         </code></p><p data-readability-styled="true"> <code>          </code> <code> CSS | Свойство Align-Items </code></p><p data-readability-styled="true"> <code> </code> <code>

    #Flex-Fear { 9003 #Flex-Fear { 9003

    #Flex-Featar

                 высота: 200 пикселей;

                 граница: 2 пикселя сплошного черного цвета;

                 дисплей: гибкий;

                 align-items: flex-start;

             }

        

     

        

             < стиль h2 = "цвет: зеленый;" >GeeksforGeeks

     

            

    "flex-start" >

                

    "background-color:Purple;" >

    Purple

    >

                   Yellow

                

            

     

        

    Выход:

    Flex-End: . Пункты будут поставлены на контейнере.

    Синтаксис: 

     align-items: flex-end;

    Example:  

    javascript

     

         </code></p><p data-readability-styled="true"> <code> </code> <code> CSS | align-items Свойство </code></p><p data-readability-styled="true"> <code>      </code> <code>

    <Стиль>

    #Flex-END {

    Шид: 320px;

                 высота: 200 пикселей;

                 граница: 2 пикселя сплошного черного цвета;

                 дисплей: гибкий;

                 align-items: flex-end;

             }

    . "цвет:зеленый;" >GeeksforGeeks

     

            

    "flex-end" >

    3             

    "background-color:Purple;" >

    Purple

    >

                   Желтый

                

    3

    1.

     

    базовая линия: Элементы будут располагаться по базовой линии контейнера.

    Синтаксис: 

     align-items: baseline;

    Пример:  

    javascript

     

         </code></p><p data-readability-styled="true"> <code>          </code> <code> CSS | align-items Свойство </code></p><p data-readability-styled="true"> <code>      </code> <code>

        

    <Центр>

    <Центр>

    "Color: Green;" "Green;" "Green;" "Green;" "Green;" "Green;" Green; "Green;" Green; "Green;" Green; "Green;" Green; "Green;" Green; "Green;" Green; "Green;" Green; "Green;" Green; "Green;" Green; "Green;" Green; "Green;" Green; "Green;" Green; "Green;" Green; "Green;" Green; "Green;" Green; "Грин;" > Geeksforgeeks

    «Исходная базовая линия» >

    3

    3

    >

    Purple

    "Фонодок: Желто >

                   Yellow

                

            

     

        

    . значение по умолчанию.

    Синтаксис: 

     align-items: initial;

    Пример:  

    javascript

    <Голова>

    CSS | Свойство Align-Items

    #INITIAL { 9003 #INITIAL { 9003

    #INITIAL a.

                 высота: 200 пикселей;

                 граница: 2 пикселя сплошного черного цвета;

                 дисплей: гибкий;

                 align-items: initial;

    }

    <Тех0023

            

    "color:green;" > Geeksforgeeks

    «Начальный» >

    >

                  Фиолетовый

                

                

    "background-color:Yellow;" >

                   Yellow

                

            

     

        

     

    Вывод:

     

    наследовать: Наследовать свойство от родительского элемента.

    Поддерживаемые браузеры: Образ браузер, поддерживаемый CSS Align-Items.

  • Opera 12.1 и выше
  • Safari 9.0 и выше

    • Элементы выравнивания CSS

    Пример <стиль> .внешний контейнер { высота: 200 пикселей; семейство шрифтов: без засечек; размер шрифта: 24px; белый цвет; граница: 1px сплошная #ccc; дисплей: гибкий; выравнивание элементов: по центру; } .внешний контейнер div { ширина: 20%; набивка: 2%; } .красный { фон: оранжево-красный; высота: 40%; } .зеленый { фон: желто-зеленый; высота: 30%; } .синий { фон: стальной синий; высота: 60%; } <дел> <дел>1 <дел>2 <дел>3

    Свойство CSS align-items задает значение по умолчанию align-self для всех блоков (включая анонимные блоки), участвующих в контексте форматирования этого блока.

    Выравнивание аналогично justify-content , но в перпендикулярном направлении.

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

    Хотя свойство align-items было создано для flex-контейнеров (первоначально под другим именем), в настоящее время его определение расширяется, чтобы включить также грид-контейнеры.

    Синтаксис

    элемента выравнивания: flex-start | гибкий конец | центр | базовый | стрейч

    Возможные значения

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

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

    Если встроенная ось гибкого элемента совпадает с поперечной осью, это значение идентично flex-start .

    стрейч
    Элементы Flex растягиваются, например, поперечный размер поля поля элемента совпадает с линией, но при этом соблюдаются ограничения min-height , min-width , max-height и max-height .

    Кроме того, все свойства CSS также принимают следующие значения ключевых слов CSS в качестве единственного компонента значения их свойства:

    начальный
    Представляет значение, указанное как начальное значение свойства.
    унаследовать
    Представляет вычисленное значение свойства родительского элемента.
    снято с охраны
    Это значение действует как inherit или initial , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.

    Основная информация о свойствах

    Исходное значение
    стрейч
    Применяется к
    Flex-контейнеры

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

    Унаследовано?
    №
    СМИ
    Визуальный
    Вычисленное значение
    Заданное значение
    Анимируемый
    №

    Пример кода

    Базовый CSS

    .внешний-контейнер { дисплей: гибкий; выравнивание элементов: по центру; }

    Рабочий пример в документе HTML

    Пример <стиль> . внешний контейнер { высота: 200 пикселей; семейство шрифтов: без засечек; размер шрифта: 24px; белый цвет; граница: 1px сплошная #ccc; дисплей: гибкий; выравнивание элементов: по центру; } .внешний контейнер div { ширина: 20%; набивка: 2%; } .красный { фон: оранжево-красный; высота: 40%; } .зеленый { фон: желто-зеленый; высота: 30%; } .синий { фон: стальной синий; высота: 60%; } <дел> <дел>1 <дел>2 <дел>3

    Попробуйте

    О Flexbox

    Flexbox относится к модулю Flexible Box Layout, представленному в CSS3. Flex-элементы помещаются в flex-контейнер. Гибкий контейнер — это элемент с дисплеем : flex или display: inline-flex .

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

    Дополнительные сведения о гибких элементах см. в описании свойства flex .

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

    • Свойство align-items определено в модуле CSS Flexible Box Layout уровня 1 (рекомендация кандидата W3C, 26 мая 2016 г.)
    • Он также переопределяется в модуле выравнивания блоков CSS уровня 3 (рабочий проект W3C).

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

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

    Префиксы поставщиков

    Для максимальной совместимости с браузерами многие веб-разработчики добавляют свойства для конкретных браузеров, используя такие расширения, как -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- для Firefox, -o- для более старых версий Opera и т. д. Как и в случае с любым свойством CSS, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.

    Эта практика не рекомендуется W3C, однако во многих случаях единственный способ протестировать свойство — включить расширение CSS, совместимое с вашим браузером.

    Основные производители браузеров обычно стремятся придерживаться спецификаций W3C, и когда они поддерживают свойство без префикса, они обычно удаляют версию с префиксом. Кроме того, W3C рекомендует поставщикам удалять свои префиксы для свойств, достигших статуса кандидата в рекомендации.

    Многие разработчики используют Autoprefixer, постпроцессор для CSS. Autoprefixer автоматически добавляет префиксы поставщиков в ваш CSS, поэтому вам это не нужно. Он также удаляет старые ненужные префиксы из вашего CSS.

    Вы также можете использовать Autoprefixer с такими препроцессорами, как Less и Sass.

    align-items · WebPlatform Docs

    Резюме

    Устанавливает выравнивание по умолчанию по поперечной оси для всех элементов flex-контейнера, включая анонимные flex-элементы, аналогично тому, как justify-content выравнивает элементы по главной оси.

    Обзорная таблица

    Начальное значение
    стрейч
    Относится к
    гибких контейнеров
    Унаследовано
    Нет
    СМИ
    визуальный
    Расчетное значение
    указанное значение
    Анимируемый
    Нет
    Свойство объектной модели CSS
    выравнивание элементов

    Синтаксис

    • align-items: baseline
    • элементы выравнивания: по центру
    • элементы выравнивания: гибкий конец
    • элементы выравнивания: гибкий старт
    • элементы выравнивания: растянуть
    • выравнивание по рамке: после
    • выравнивание по рамке: базовый уровень
    • выравнивание по рамке: до
    • выравнивание по рамке: посередине
    • выравнивание по рамке: растягивание
    • flex-align: базовый уровень
    • flex-align: по центру
    • flex-align: конец
    • flex-align: начало
    • flex-align: растяжка

    Значения

    гибкий старт
    Край начального поля гибкого элемента размещается на одном уровне с краем начального пересечения линии.
    гибкий конец
    Край поперечного поля гибкого элемента размещается на одном уровне с поперечным краем линии.
    центр
    Поле поля гибкого элемента центрировано по поперечной оси внутри строки. (Если поперечный размер гибкой линии меньше, чем у гибкого элемента, он будет переполняться одинаково в обоих направлениях.)
    базовый уровень
    Если встроенная ось гибкого элемента совпадает с поперечной осью, это значение идентично «flex-start». В противном случае он участвует в выравнивании базовой линии: все участвующие flex-элементы в строке выравниваются таким образом, что их базовые линии выровнены, а элемент с наибольшим расстоянием между его базовой линией и его краем поперечного начала помещается заподлицо с краем поперечного начала строки. линия.
    стрейч
    Если свойство cross size гибкого элемента равно auto , его используемое значение — это длина, необходимая для того, чтобы поперечный размер поля поля элемента был как можно ближе к тому же размеру, что и линия, при этом соблюдая ограничения, налагаемые min-height/min-width/max- высота/макс. ширина. Примечание: если высота гибкого контейнера ограничена, значение stretch может привести к тому, что содержимое гибкого элемента переполнит элемент.

    Примеры

    Выравнивание flex-элементов в flex-контейнере. Измените значения в живом примере.

     .контейнер {
  дисплей: гибкий;
  ширина: 400 пикселей;
  высота: 200 пикселей;
  фон: #CCC;
  выравнивание элементов: по центру; /* значения: flex-start, flex-end, center, baseline, stretch */
}
.контейнер раздел {
  гибкий: 1;
  ширина: 100 пикселей;
  высота: авто; /* пусть это будет установлено, чтобы увидеть, как элементы реагируют на «align-items: stretch» ​​*/
  поле: 0px;
  семейство шрифтов: горький;
  размер шрифта: 24px;
}
.container .третий элемент {
  высота: 110 пикселей; /* отключите это, чтобы увидеть, как элемент реагирует на «align-items: stretch» ​​*/
  фон: #CC3333;
  размер шрифта: 14px; /* перегружаем размер шрифта, чтобы этот элемент реагировал на 'align-items: baseline' */
}
. container .второй элемент {
  высота: 140 пикселей; /* отключите это, чтобы увидеть, как элемент реагирует на «align-items: stretch» ​​*/
  фон: #FFFC33;
}
.контейнер .первый элемент {
  высота: 160 пикселей; /* отключите это, чтобы увидеть, как элемент реагирует на «align-items: stretch» ​​*/
  фон: #3333FF;
}

    Просмотреть живой пример

    Отображение детей по центру по горизонтали.

     .список {
  дисплей: гибкий;
  flex-направление: столбец;
  выравнивание элементов: по центру;
}
.список разделов {
  гибкий: 1;
}

    Просмотреть живой пример

    Отображение детей по центру по вертикали.

     .список {
  дисплей: гибкий;
  flex-направление: строка;
  выравнивание элементов: по центру;
  высота: 100 пикселей;
}
.список разделов {
  гибкий: 1;
}

    Просмотреть живой пример

    Примечания

    Это свойство было названо flex-align в старых проектах.

    Сопутствующие спецификации

    Модуль CSS Flexible Box Layout
    Рекомендация кандидата

    См.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *