CSS Flex Элементы
Дочерние элементы
Прямые дочерние элементы гибкого контейнера автоматически становятся гибкими (flex) элементами.
1
2
3
4
Элемент выше представляет четыре синих гибких элемента внутри серого гибкого контейнера.
Пример
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Свойства гибкого элемента:
Свойство order
Свойство order определяет порядок гибких элементов.
1
2
3
4
Первый гибкий элемент в коде не обязательно должен отображаться как первый элемент в макете.
Значение order должно быть числом, значение по умолчанию - 0.
Пример
Свойство order может изменять порядок гибких элементов:
<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 определяет, насколько гибкий элемент будет расти относительно остальных гибких элементов.
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 определяет, насколько гибкий элемент будет сжиматься по сравнению с остальными гибкими элементами.
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 является сокращенным свойством для
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:
| Свойство | Описание |
|---|---|
| align-self | Задает выравнивание для гибкого элемента (переопределяет свойство гибкого контейнера align-items) |
| flex | Сокращенное свойство для свойств flex-grow, flex-shrink и flex-base |
| flex-basis | Задает начальную длину гибкого элемента |
| flex-grow | Определяет, насколько гибкий элемент будет расти относительно остальных гибких элементов в том же контейнере |
| flex-shrink | Определяет, насколько гибкий элемент будет сжиматься по сравнению с остальными гибкими элементами в том же контейнере |
| order | Определяет порядок гибких элементов в одном контейнере |
