flex
Загальний огляд
CSS параметр flex є скороченим записом властивості, котра визначає здатність flex елемента змінювати свої розміри аби заповнити наявний простір. Flex елементи можна розтягнути аби використати увесь наявний простір пропорційно до вказаного параметра flex-grow, або flex-shrink аби запобігти виходу за межі батьківського контейнера.
Initial value (en-US) | as each of the properties of the shorthand:
|
---|---|
Applies to | flex items, including in-flow pseudo-elements |
Inherited (en-US) | no |
Computed value (en-US) | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Перегляньте Використання гнучких CSS контейнерів для більш детальної інформації та опису властивостей.
Синтаксис
/* 0 0 auto */
flex: none;
/* Одне значення, ціле число: flex-grow (flex-basis змінюється на 0) */
flex: 2;
/* Одне значення, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: auto;
flex: content;
/* Два значення: flex-grow | flex-basis */
flex: 1 30px;
/* Два значення: flex-grow | flex-shrink (flex-basis змінюється на 0) */
flex: 2 2;
/* Три значення: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* Глобальні значення */
flex: inherit;
flex: initial;
flex: unset;
Значення
<'flex-grow'>
- Визначає
ширину
flex елемента відносно ширин всіх сусідніх елементів. Перегляньте<number>
(en-US) задля детального опису. Від'ємні значення вважаються невірними. Приймає значення 1, коли воно не вказується явно. <'flex-shrink'>
- Визначає
flex-shrink
flex елемента. Перегляньте<number>
(en-US) задля детального опису. Від'ємні значення вважаються невірними. Приймає значення 1, коли воно не вказується явно. <'flex-basis'>
- Визначає
базис
flex елемента. Може приймати будь-яке значення, з тих, що можуть приймати параметриwidth і
height
. Значення0
має мати одиницю виміру, аби уникнути трактування його, як значення гнучкості. Приймає значення0%,
коли воно не вказується явно. none
- Ключове слово, котре по значенню рівне
0 0 auto
. -
Формальний синтаксис
none | (en-US) [ (en-US) <'flex-grow'> <'flex-shrink'> (en-US)? (en-US) || (en-US) <'flex-basis'> (en-US) ] (en-US)
Приклад
#flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#flex-container > .flex-item {
-webkit-flex: auto;
flex: auto;
}
#flex-container > .raw-item {
width: 5rem;
}
<div id="flex-container">
<div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
<div class="raw-item" id="raw">Raw box</div>
</div>
Результат
Специфікації
Специфікація | Стан | Коментар |
---|---|---|
CSS Flexible Box Layout Module The definition of 'flex' in that specification. |
Candidate Recommendation | Загальне визначення |
Сумісність із браузерами
Підтримка | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Базова підтримка | 18.0 (18.0)[1] 20.0 (20.0) 28.0 (28.0)[2] |
21.0-webkit (en-US) 29.0 |
10.0-ms (en-US)[3] 11.0[3] |
12.10 |
6.1-webkit (en-US) |
Підтримка | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Базова підтримка | ? | 4.4 | 11 | 12.10 | 7.1-webkit (en-US) |
[1] В Gecko 18.0 (Firefox 18.0 / Thunderbird 18.0 / SeaMonkey 2.15) та 19.0 (Firefox 19.0 / Thunderbird 19.0 / SeaMonkey 2.16) підтримка flexbox прихована за налаштуванням about:config
пунктом layout.css.flexbox.enabled
, котрий по замовчуванню - false
.
[2] Багатостроковий flexbox підтримується починаючи з Gecko 28.0 (Firefox 28.0 / Thunderbird 28.0 / SeaMonkey 2.25).
В додаток до підтримки непрефіксованого flexbox, у Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) додано підтримку -webkit
префіксованої версії властивості з огляду на веб-сумісність з налаштуванням layout.css.prefixes.webkit
, котре по замовчуванню дорівнює false.
Починаючи з версії Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) це налаштування дорівнює true
.
[3] Internet Explorer 10-11 (але не 12+) ігнорує вживання calc()
у частині flex
синтаксису, що відповідає за властивість flex-basis
. Це можна обійти використанням не сокроченого, а повного запису цієї властивості. Перегляньте Flexbug #8 задля більш детального опису. Визначення flex
зі значенням без одиниці виміру у частині, що відповідає за flex-basis
вважається синтаксично не вірною у цих версіях, а тому її буде проігноровано. Виправити це можна - завжди додаючи одиницю виміру у частині властивості, що відповідає за flex-basis
, скороченого запису flex
. Перегляньте Flexbug #4 задля більш детільного опису.