Элементы CSS Flex
Дочерние элементы (предметы)
Прямые дочерние элементы гибкого контейнера автоматически становятся гибкими (гибкими) элементами.
1
2
3
4
Вышеприведенный элемент представляет собой четыре синих flex-элемента внутри серого flex-контейнера.
Пример
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Свойства гибкого элемента:
Свойство заказа
Свойство orderопределяет порядок flex-элементов.
1
2
3
4
Первый гибкий элемент в коде не обязательно должен отображаться как первый элемент в макете.
Значение заказа должно быть числом, значение по умолчанию — 0.
Пример
Свойство order может изменить порядок flex-элементов:
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
Свойство flex-grow
Свойство flex-growуказывает, насколько flex-элемент будет расти по сравнению с остальными flex-элементами.
1
2
3
Значение должно быть числом, значение по умолчанию — 0.
Пример
Заставьте третий гибкий элемент расти в восемь раз быстрее, чем другие гибкие элементы:
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow:
8">3</div>
</div>
Свойство flex-shrink
Свойство flex-shrinkуказывает, насколько flex-элемент будет уменьшаться относительно остальных flex-элементов.
1
2
3
4
5
6
7
8
9
10
Значение должно быть числом, значение по умолчанию — 1.
Пример
Не позволяйте третьему гибкому элементу сжиматься так же сильно, как и другим гибким элементам:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink:
0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
Свойство flex-basis
Свойство flex-basisуказывает начальную длину гибкого элемента.
1
2
3
4
Пример
Установите начальную длину третьего гибкого элемента на 200 пикселей:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
Гибкое свойство
Свойство flexявляется сокращенным свойством для свойств
flex-grow, flex-shrinkи flex-basis.
Пример
Сделайте третий гибкий элемент не увеличивающимся (0), не уменьшаемым (0) и с начальной длиной 200 пикселей:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex:
0 0 200px">3</div>
<div>4</div>
</div>
Свойство align-self
Свойство align-selfуказывает выравнивание для выбранного элемента внутри гибкого контейнера.
Свойство align-self переопределяет выравнивание по умолчанию, заданное align-itemsсвойством контейнера.
1
2
3
4
В этих примерах мы используем контейнер высотой 200 пикселей, чтобы лучше продемонстрировать
align-selfсвойство:
Пример
Выровняйте третий гибкий элемент по центру контейнера:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self:
center">3</div>
<div>4</div>
</div>
Пример
Выровняйте второй гибкий элемент в верхней части контейнера, а третий гибкий элемент в нижней части контейнера:
<div class="flex-container">
<div>1</div>
<div style="align-self:
flex-start">2</div>
<div style="align-self:
flex-end">3</div>
<div>4</div>
</div>
Свойства элементов CSS Flexbox
В следующей таблице перечислены все свойства элементов CSS Flexbox:
| Property | Description |
|---|---|
| align-self | Specifies the alignment for a flex item (overrides the flex container's align-items property) |
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
| flex-basis | Specifies the initial length of a flex item |
| flex-grow | Specifies how much a flex item will grow relative to the rest of the flex items inside the same container |
| flex-shrink | Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container |
| order | Specifies the order of the flex items inside the same container |