align-items
===========

Описание
--------

CSS свойство **`align-items`** выравнивает flex-элементы текущей flex-линии таким же образом, как и `justify-content`, но в перпендикулярном направлении.

|  |  |
| --- | --- |
| Начальное значение | `normal` |
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |

Подробнее и больше информации читайте в Использование гибких блоков CSS.

Синтаксис
---------


```css
/\* Align to cross-start \*/
align-items: flex-start;

/\* Align to cross-end \*/
align-items: flex-end;

/\* Центрировать элементы в поперечной оси \*/
align-items: center;

/\* Выровняйте базовые линии предметов \*/
align-items: baseline;

/\* Растянуть предметы, чтобы соответствовать \*/
align-items: stretch;

/\* Глобальные значения \*/
align-items: inherit;
align-items: initial;
align-items: unset;
```

### Значения

`normal`

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

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

`flex-start`

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

`flex-end`

The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.

`center`

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

`baseline`

All flex items are aligned such that their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.

`stretch`

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

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

align-items =   
  normal                                    | (en-US)  
  stretch                                   | (en-US)  
  <baseline-position>                       | (en-US)  
  [ (en-US) <overflow-position>? (en-US) <self-position> ] (en-US)  | (en-US)  
  anchor-center                               
  
<baseline-position> =   
  [ (en-US) first | (en-US) last ] (en-US)? (en-US)  && (en-US)  
  baseline             
  
<overflow-position> =   
  unsafe  | (en-US)  
  safe      
  
<self-position> =   
  center      | (en-US)  
  start       | (en-US)  
  end         | (en-US)  
  self-start  | (en-US)  
  self-end    | (en-US)  
  flex-start  | (en-US)  
  flex-end      
  
```

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Использование гибких блоков CSS (en-US)