CSS-свойство flex-based
указывает начальный основной размер элемента flex.
Значение по умолчанию: | auto |
Применяется к: | Flex-элементы |
Наследование: | Нет |
Анимирование: | Да. Анимируемые свойства |
Версия: | Новый в CSS3 |
Синтаксис
Синтаксически свойства задаются по следующему шаблону:
flex-basis: width | auto | initial | inherit
Примеры написания кода свойства flex-basis
:
.flex-container {
display: flex;
}
.item1 {
background: #ff80c0;
-webkit-flex-basis: 300px; /* Safari 6.1+ */
flex-basis: 300px;
}
.item2 {
background: #8080ff;
-webkit-flex-basis: 30%; /* Safari 6.1+ */
flex-basis: 30%;
}
.item3 {
width: 120px;
background:#0080ff;
}
Значения свойств
В следующей таблице описаны значения этого свойства.
Значение | Описание |
---|---|
width | Длина в абсолютных или относительных единицах, указывающая начальную длину flex-элемента. Отрицательные значения недействительны. |
auto |
Ширина flex-элемента равна значению его свойства width . Если свойство width не указано для flex-элемента, ширина будет соответствовать его содержимому. Это значение установлено по умолчанию. |
initial |
Устанавливает это свойство в значение по умолчанию. |
inherit |
Если указан, связанный элемент принимает вычисленное значение своего родительского элемента flex-basis . |
Поддержка браузеров
Свойство flex-basis
поддерживается во всех основных браузерах.