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 допомагає зрозуміти розмір елементів:

 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
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
flex-basis
Chrome Full support 29
Edge Full support 12
Firefox Full support 22
footnote
Internet Explorer Full support 11
footnote
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
footnote
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

Дивіться також