Властивість flex у CSS є скороченням для flex-grow, flex-shrink, і флекс-основа . Він працює лише на гнучких елементах, тому, якщо елемент контейнера не є гнучким елементом, flex властивість не вплине на відповідний елемент.

Ця властивість використовується для встановлення довжини гнучких елементів. За допомогою цієї властивості CSS легко розташувати дочірні елементи та основний контейнер. Він використовується для встановлення того, як flex-item буде зменшуватися або рости, щоб відповідати простору.

The flex властивість може бути визначена одним, двома або трьома значеннями.

• Якщо є синтаксис з одним значенням, значення має бути або числом, або ключовими словами, наприклад немає, авто, або початковий .
• Якщо є синтаксис із двома значеннями, перше значення має бути числом (використовується як flex-grow ), другим значенням може бути число (використовується для флекс-усадка ) або дійсне значення ширини (використовується як флекс-основа ).
• Якщо є тризначний синтаксис, значення мають відповідати такому порядку: a номер для flex-grow, a номер для flex-shrink, і дійсний ширина значення для флекс-основа .

Синтаксис

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

Вартість власності

flex-grow: Це додатне безодиничне число, яке визначає коефіцієнт зростання гнучкості. Він визначає, наскільки цей елемент буде рости порівняно з іншими гнучкими елементами. Негативні значення не допускаються. Якщо він опущений, він встановлює значення 1 .

flex-shrink: Це додатне безрозмірне число, яке визначає коефіцієнт усадки при гнучкості. Він визначає, наскільки елемент зменшиться порівняно з іншими гнучкими елементами. Негативні значення не допускаються. Якщо він опущений, він встановлює значення 1 .

flex-основа: Це довжина у відносних або абсолютних одиницях, яка визначає початкову довжину flex-item. Він використовується для встановлення довжини flex-item. Його значення можуть бути автомобіль, спадок, або число, за яким слідують одиниці вимірювання довжини, наприклад em, px, і т. д. Від’ємні значення не допускаються. Якщо він опущений, він встановлює значення 0 .

авто: Це значення властивості flex еквівалентне 11 авто .

немає: Це значення властивості flex еквівалентне 0 0 авто . Він не збільшує і не зменшує гнучкі елементи.

початковий: Він встановлює для властивості значення за замовчуванням. Це еквівалентно 0 0 авто .

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

приклад

У цьому прикладі є три контейнери, кожен з яких містить три flex-items. The ширина і висота контейнерів 300 пікселів і 100 пікселів .

Ми застосовуємо згинання: 1; до гнучких елементів першого контейнера, flex: 0 50px; до flex-items другого контейнера, і згинання: 2 2; до flex-items третього контейнера.

 CSS flex Property .container { width: 200px; height: 100px; border: 1px solid black; display: flex; margin: 15px; background-color: blue; } .flex-item{ flex: 1; // unitless number: flex-grow } .flex-item1{ flex: 0 50px; // flex-grow, flex-basis } .flex-item2{ flex: 2 2; // flex-grow, flex-shrink } .flex-item, .flex-item1, .flex-item2 { background-color: lightblue; margin: 4px; } <h3> flex: auto; </h3> <h3> flex: 0 1 30px; </h3> 

Вихід