Это flex-basisсвойство является подсвойством модуля Flexible Box Layout.
Он определяет начальный размер гибкого элемента, прежде чем любое доступное пространство будет распределено в соответствии с коэффициентами гибкости. Если он не flexуказан в сокращении, его указанное значение равно нулю длины.
Значение на основе гибкости, устанавливаемое для изменения autoразмера элемента в соответствии с его свойством размера (которое само может быть ключевым словом auto, определяющим размер элемента в зависимости от его содержимого).
Синтаксис
flex-basis: .flex-item ( flex-basis: 100px; )Обратите внимание, что как и для любой ширины, отрицательная длина недопустима.
Демо
Поддержка браузера
- (современный) означает последний синтаксис из спецификации (например
display: flex;) - (гибрид) означает странный неофициальный синтаксис 2011 года (например
display: flexbox;) - (old) означает старый синтаксис 2009 года (например
display: box;)
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (современный) 20- (старый) | 3.1+ (старые версии) | 2-21 (старые) 22+ (новые) | 12.1+ (современный) | 10+ (гибрид) | 2.1+ (старая версия) | 3.2+ (старые) |
Браузер Blackberry 10+ поддерживает новый синтаксис.
Для получения дополнительной информации о том, как смешивать синтаксисы, чтобы получить лучшую поддержку браузера, обратитесь к этой статье (CSS-Tricks) или этой статье (DevOpera).