Властивість flex-basis визначає основу флексу, яка є початковим розміром елемента. Схоже на властивості width та height, до яких додається вміст елемента.
Коротка інформація
Значення за замовчуванням
auto
Успадковується
Ні
Застосовується
До флекс-елементів
Анімується
Так
Синтаксис
<code>flex-basis: auto | <розмір>
Позначення
Опис
Приклад
<тип>
Вказує тип значення.
<розмір>
A && B
Значення повинні виводитися в вказаному порядку.
<розмір> && <колір>
A | B
Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B).
normal | small-caps
A || B
Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку.
width || count
[ ]
Групує значення.
[ crop || cross ]
*
Повторювати нуль або більше разів.
[,<час>]*
+
Повторювати один або більше разів.
<число>+
?
Вказаний тип, слово або група не є обов'язковим.
inset?
{A, B}
Повторювати не менше A, але не більше B разів.
<радіус>{1,4}
#
Повторювати один або більше разів через кому.
<час>#
Значення
auto
Вказує автоматичний розмір на основі вмісту елемента.
<размер>
Вказує розмір елемента в px, mm, pt або у відсотках вздовж головної осі. У цьому розмір обчислюється щодо батька. Негативне значення неприпустиме.
Приклад
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex-basis</title> <style> .flex-container { display: flex; /* Флекси */
height: 300px; /* Висота */
color: #fff; /* Білий колір тексту */
font-size: 2.6em; /* Розмір шрифту */
flex-flow: column wrap; /* Маємо у вигляді колонок */
}
.flex-item { display: flex; /* Флекси */
align-items: center; /* Вирівнювання тексту по вертикалі */
justify-content: center; /* Вирівнювання тексту по горизонталі */
}
.one { background: #508694; /* Колір тла */
margin-right: 10px; /* Відступ праворуч */
flex-basis: 100%; order: 1; /* Перший блок */
}
.two { background: #BB844C; /* Колір тла */
margin-bottom: 10px; /* Відступ знизу */
flex: 1 1 0; order: 2; /* Другий блок */
}
.three { background: #929D79; /* Колір тла */
flex: 1 1 0; order: 3; /* Третій блок */
}
</style>
</head>
<body> <div class="flex-container"> <div class="flex-item one">Перший</div> <div class="flex-item two">Другий</div> <div class="flex-item three">Третій</div>
</div>
</body>
</html>
Примітка
Safari до версії 9 підтримує властивість -webkit-flex-basis.
Кожна специфікація проходить кілька стадій схвалення.
Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
11
13
29
12.1
6.1
9
28
4.4
28
12.1
7.1
9.2
Браузери
У таблиці браузерів застосовуються такі позначення .
— властивість повністю підтримується браузером з усіма допустимими значеннями;
— властивість браузером не сприймається та ігнорується;
;— при роботі можливий але поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, зазначених у специфікації. Число вказує версію браузера, починаючи з якої властивість підтримується.
