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 | Визначає порядок гнучких елементів в одному контейнері |
