-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
74 lines (52 loc) · 3.83 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
---
title: align-items
slug: Web/CSS/align-items
---
{{CSSRef}}
## Описание
[CSS](/ru/docs/CSS) свойство **`align-items`** выравнивает flex-элементы текущей flex-линии таким же образом, как и [`justify-content`](/en/CSS/justify-content), но в перпендикулярном направлении.
{{cssinfo}}
Подробнее и больше информации читайте в [Использование гибких блоков CSS](/en/CSS/Using_CSS_flexible_boxes).
## Синтаксис
```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 растягиваются, например, поперечный размер поля элемента совпадает с линией при соблюдении ограничений ширины и высоты.
### Формальный синтаксис
{{csssyntax}}
## Спецификации
{{Specifications("css.properties.align-items.grid_context")}}
## Совместимость с браузерами
{{Compat}}
## Смотрите также
- [Использование гибких блоков CSS](/ru/docs/CSS/Using_CSS_flexible_boxes)