Свойството flex в CSS е съкращение за flex-grow, flex-shrink, и гъвкава основа. Работи само върху гъвкавите елементи, така че ако елементът на контейнера не е гъвкав елемент, flex свойство няма да засегне съответния елемент.
Това свойство се използва за задаване на дължината на гъвкавите елементи. Позиционирането на дъщерни елементи и основния контейнер е лесно с това CSS свойство. Използва се, за да зададете как даден гъвкав елемент ще се свие или расте, за да се побере в пространството.
The flex свойството може да бъде определено с една, две или три стойности.
- Когато има синтаксис с една стойност, стойността трябва да бъде или число, или ключовите думи като няма, автоматично, или начален .
- Когато има синтаксис с две стойности, първата стойност трябва да бъде число (използвано като flex-grow ), втората стойност може да бъде или число (използвано за flex-свиване ) или валидна стойност за ширина (използвана като flex-основа ).
- Когато има синтаксис с три стойности, тогава стойностите трябва да следват реда: a номер за flex-grow, а номер за гъвкаво свиване, и валиден ширина стойност за flex-основа .
Синтаксис
flex: flex-grow flex-shrink flex-basis | auto | none | initial | inherit;
Стойности на имотите
flex-grow: Това е положително безединично число, което определя коефициента на нарастване на гъвкавост. Той определя колко ще нарасне артикулът в сравнение с другите гъвкави артикули. Не се допускат отрицателни стойности. Ако е пропуснато, тогава се задава стойността 1 .
гъвкаво свиване: Това е положителното безединично число, което определя коефициента на свиване при огъване. Той определя колко ще се свие елементът в сравнение с другите гъвкави елементи. Не се допускат отрицателни стойности. Ако е пропуснато, тогава се задава стойността 1 .
гъвкава основа: Това е дължината в относителни или абсолютни единици, която определя първоначалната дължина на гъвкавия елемент. Използва се за задаване на дължината на flex-item. Стойностите му могат да бъдат кола, наследяване, или число, последвано от единиците за дължина, като напр em, px, и т.н. Не се допускат отрицателни стойности. Ако е пропуснато, тогава се задава стойността 0 .
Автоматичен: Тази стойност на свойството flex е еквивалентна на 11 авто .
нито един: Тази стойност на свойството flex е еквивалентна на 0 0 авто . Той нито расте, нито свива гъвкавите елементи.
първоначално: Той задава стойността на свойството по подразбиране. Това е еквивалентно на 0 0 авто .
наследявам: Той наследява свойството от своя родителски елемент.
Пример
В този пример има три контейнера, всеки с три гъвкави елемента. The ширина и височината на контейнерите са 300 пиксела и 100 пиксела .
Ние прилагаме гъвкавост: 1; към гъвкавите елементи на първия контейнер, гъвкавост: 0 50px; към гъвкавите елементи на втория контейнер и гъвкавост: 2 2; към гъвкавите елементи на третия контейнер.
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> Тествайте сега Изход
