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