css властивість flex

Властивість flex дозволяє вказати параметри елемента, щоб він ефективно заповнював доступний простір. Елементи можуть бути розтягнуті пропорційно з урахуванням заданого співвідношення або стиснуті, щоб цілком вмістити всі елементи без переносів в один рядок.

Властивість flex — універсальна властивість, яка дозволяє одночасно задати наступні значення:

• flex-grow
• flex-shrink
• flex-basis

У гнучкому контейнері, нащадки можуть бути розташовані у будь-якому напрямку, і можуть змінювати власні розміри: збільшуватися, щоб заповнити батьківський елемент, або зменшуватися, щоб не вилізти за його межі.

За змовчуванням нащадки не можуть бути меншими, ніж їхній вміст. Щоб змінити це, використовуйте властивості min-width i max-width.

правити

Нотатка

Властивість 'flex' працює тільки з гумовими елементами, тобто з тими елементами, у котрих властивість 'display' встановлена як flex (display: flex; або display: inline-flex;).

автор: Svitlana правити

Нотатка

Рекомендується застосовувати властивість flex для скороченого запису, а не flex-grow, flex-shrink і flex-basis окремо. Тому що це робить стилі коротшими, зрозумілішими, а також тому, що універсальна властивість правильно скидає значення не заданих властивостей до початкового (без задання).

автор: Svitlana правити

Нотатка

Якщо для властивості задати одне чи два ключових слова, flex-basis автоматично змінює своє значення з auto до 0.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

Властивість flex може отримувати 7 значень:

flex-grow

Число, яке вказує пропорції флекс елемента всередині контейнера.

автор: Svitlana

правити

flex-shrink

Число, яке вказує коефіцієнт стиснення флексів в контейнері.

автор: Svitlana

правити

flex-basis

Початкова довжина елемента. Можна вибрати зі значень auto, inherit, %, px, em або будь-яку іншу одиницю виміру довжини

автор: Svitlana

правити

auto

Те ж, що й 1 1 auto

автор: Svitlana

правити

initial

Те ж, що й 0 1 auto

автор: Svitlana

правити

none

Встановлює значення властивості у значення без задання.

автор: Svitlana

правити

inherit

Успадковує властивість від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	29	22	9	12.1	12	11

Підтримка: мобільні переглядачі

Переглядач
	4.4	29	22	9

Приклади

+ запропонувати свій приклад у пісочниці

<div id="main">
    <div>короткий</div>
    <div>значно довший вміст усередині</div>
    <div>середній текст</div>
</div>

#main {
    display: flex;
}

#main div {
    flex: 1;
    padding: 8px;
    border: 1px solid #0172ad;
}