English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Руководство по CSS

CSS @правила (RULES)

Полный список свойств CSS

Метод использования и примеры CSS-свойства flex-basis

CSS-свойство flex-basis определяет начальное базовое значение эластичного элемента

В таблице приведено описание использования и историю версий этого свойства, а также синтаксис использования в скриптах JavaScript.

Значение по умолчанию:auto
Подходит для:Эластичные элементы
Наследование:Нет
Анимация:Да.См. также Анимационные свойства.
Версия: Новая функция CSS3
JavaScript синтаксис:объект.style.flexBasis="180px"

Синтаксис использования flex-basis

Синтаксис этого свойства следующий:

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Длина, выраженная абсолютными или относительными единицами, используемая для указания начальной длины эластичного элемента. Отрицательные значения недопустимы.
autoШирина эластичного элемента равна егоwidthЗначение свойства. Если width не указан для эластичного элемента, ширина зависит от его содержимого. Это значение по умолчанию.
initialУстановите это свойство в его значение по умолчанию.
inheritЕсли указано, то связанный элемент принимает значение свойства flex-basis родительского элемента.

Совместимость браузеров

Совместимость браузеров для свойства flex-basis, числа в таблице представляют собой минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.

  • Firefox 18+ -moz-, 28

  • Google Chrome 21+ -webkit-, 29

  • Internet Explorer 10+ -ms-, 11

  • Apple Safari 6.1+ -webkit-

  • Opera 12.1+

Дополнительное чтение

Узнайте больше из следующих инструкций:CSS3 многостраничная разметка.

Связанные свойства:align-content,align-items,align-self,display,flex,flex-direction,flex-flow,flex-grow,flex-shrink,flex-wrap,justify-content,min-height,min-width,order.

CSS3 flex-direction свойствоCSS3 flex свойство