flex-basis
Властивість CSS flex-basis
(основа гнучкості) задає початкову основну розмірність гнучкого елемента. Вона задає розмір рамки вмісту, якщо у box-sizing
не задано щось інше.
Спробуйте його в дії
У цьому прикладі як властивість flex-grow
, так і властивість flex-shrink
мають значення 1
на всіх трьох елементах, що означає те, що гнучкі елементи можуть збільшуватися і зменшуватися відносно початкового значення flex-basis
.
Це демо потім змінює flex-basis
на першому елементі. Він буде збільшуватися і зменшуватися відносно свого flex-basis. Це означає, наприклад, що коли flex-basis
першого елемента дорівнює 200px
, він спочатку буде мати розмір 200px, а потім зменшиться, щоб вміститися в доступний простір, при цьому інші елементи матимуть розмір, що не менше min-content
.
Зображення нижче демонструє, як Flexbox Inspector Firefox допомагає зрозуміти розмір елементів:
Примітка: Коли для елемента задано і
flex-basis
(зі значенням, відмінним відauto
), іwidth
(абоheight
у випадкуflex-direction: column
),flex-basis
має пріоритет.
Синтаксис
/* Задати <'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: 50%;
flex-basis: auto;
/* Ключові слова природного розміру */
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
/* Задати розмір автоматично на основі вмісту гнучкого елемента */
flex-basis: content;
/* Глобальні значення */
flex-basis: inherit;
flex-basis: initial;
flex-basis: revert;
flex-basis: revert-layer;
flex-basis: unset;
Властивість flex-basis
задається або ключовим словом content
, або значенням <'width'>
.
Значення
<'width'>
Будь-яка з наступних одиниць вимірювання:
<length>
задає абсолютне значення<percentage>
задає відсоткове значення відносно ширини або висоти області вмісту контейнерного блокаauto
використовує значення width при горизонтальному напрямку письма і значення властивостіheight
при вертикальному напрямку письма; коли відповідне значення також єauto
, використовується значенняcontent
max-content
задає бажану природну ширинуmin-content
задає мінімальну природну ширинуfit-content
задає максимально можливий розмір області вмісту контейнерного блока, обмежену значеннямиmin-content
іmax-content
, що обчислюється на основі вмісту поточного елемента
content
Вказує на автоматичне визначення розміру на основі вмісту гнучкого елемента.
Примітка: Цього значення не було в Компонуванні гнучких рамок при початковому випуску, тому деякі старі реалізації його не підтримують. Рівносильного ефекту можна досягти, використовуючи
auto
разом із головним розміром (width або height) зі значеннямauto
.- Спершу
flex-basis:auto
означало "дивись на мою властивістьwidth
абоheight
". - Потім
flex-basis:auto
стало означати автоматичне визначення розміру, і додали ключове слово "main-size" на позначення "дивись на мою властивістьwidth
абоheight
". Його реалізували у ваді Firefox 1032922. - Потім ці зміни були відкинуті у ваді Firefox 1093316, тому
auto
знову означає "дивись на мою властивістьwidth
абоheight
"; і вводиться нове ключове словоcontent
для запуску автоматичного визначення розміру. (Вада Firefox 1105111 охоплює додавання цього ключового слова).
- Спершу
Формальне визначення
Початкове значення | auto |
---|---|
Успадковується | ні |
Обчислене значення | as specified, but with relative lengths converted into absolute lengths |
Формальний синтаксис
content | <\'width\'>
Приклади
Задання початкових розмірів гнучких елементів
HTML
<ul class="container">
<li class="flex flex1">1: перевірка flex-basis</li>
<li class="flex flex2">2: перевірка flex-basis</li>
<li class="flex flex3">3: перевірка flex-basis</li>
<li class="flex flex4">4: перевірка flex-basis</li>
<li class="flex flex5">5: перевірка flex-basis</li>
</ul>
<ul class="container">
<li class="flex flex6">6: перевірка flex-basis</li>
</ul>
CSS
.container {
font-family: arial, sans-serif;
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.flex {
background: #6ab6d8;
padding: 10px;
margin-bottom: 50px;
border: 3px solid #2e86bb;
color: white;
font-size: 14px;
text-align: center;
position: relative;
}
.flex::after {
position: absolute;
z-index: 1;
left: 0;
top: 100%;
margin-top: 10px;
width: 100%;
color: #333;
font-size: 12px;
}
.flex1 {
flex-basis: auto;
}
.flex1::after {
content: "auto";
}
.flex2 {
flex-basis: max-content;
}
.flex2::after {
content: "max-content";
}
.flex3 {
flex-basis: min-content;
}
.flex3::after {
content: "min-content";
}
.flex4 {
flex-basis: fit-content;
}
.flex4::after {
content: "fit-content";
}
.flex5 {
flex-basis: content;
}
.flex5::after {
content: "content";
}
Результати
Специфікації
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flex-basis
|
Chrome Full support 29 | Edge Full support 12 | Firefox Full support 22 | Internet Explorer Full support 11 | Opera Full support 12.1 | Safari Full support 9 | WebView Android Full support 4.4 | Chrome Android Full support 29 | Firefox for Android Full support 22 | Opera Android Full support 12.1 | Safari on iOS Full support 9 | Samsung Internet Full support 2.0 |
auto
|
Chrome Full support 22 | Edge Full support 12 | Firefox Full support 22 | Internet Explorer Full support 11 | Opera Full support 12.1 | Safari Full support 9 | WebView Android Full support 37 | Chrome Android Full support 25 | Firefox for Android Full support 22 | Opera Android Full support 12.1 | Safari on iOS Full support 9 | Samsung Internet Full support 1.5 |
content
|
Chrome Full support 94 | Edge Full support 94 | Firefox Full support 61 | Internet Explorer No support No | Opera Full support 80 | Safari Preview browser support TP | WebView Android Full support 94 | Chrome Android Full support 94 | Firefox for Android Full support 61 | Opera Android No support No | Safari on iOS No support No | Samsung Internet Full support 17.0 |
fit-content
|
Chrome Full support 94 | Edge Full support 94 | Firefox Full support 94 | Internet Explorer No support No | Opera Full support 80 | Safari No support No | WebView Android Full support 94 | Chrome Android Full support 94 | Firefox for Android Full support 94 | Opera Android No support No | Safari on iOS No support No | Samsung Internet Full support 17.0 |
max-content
|
Chrome Full support 94 | Edge Full support 94 | Firefox Full support 66 | Internet Explorer No support No | Opera Full support 80 | Safari No support No | WebView Android Full support 94 | Chrome Android Full support 94 | Firefox for Android Full support 66 | Opera Android No support No | Safari on iOS No support No | Samsung Internet Full support 17.0 |
min-content
|
Chrome Full support 94 | Edge Full support 94 | Firefox Full support 66 | Internet Explorer No support No | Opera Full support 80 | Safari No support No | WebView Android Full support 94 | Chrome Android Full support 94 | Firefox for Android Full support 66 | Opera Android No support No | Safari on iOS No support No | Samsung Internet Full support 17.0 |
Дивіться також
- Посібник із Флексбоксу CSS – Базові концепції Флексбоксу
- Посібник із Флексбоксу CSS – Контроль співвідношень між гнучкими елементами за головною віссю
width