flex-basis
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
CSS свойство flex-basis
задаёт базовый размер флекс элемента по основной оси. Это свойство определяет размер контент-бокса, если не задано иначе через box-sizing
.
Интерактивный пример
Примечание: В случае, если для элемента одновременно заданы flex-basis
(отличное от auto
) и width
( или height
в случае flex-direction: column
), flex-basis
имеет приоритет.
Начальное значение | auto |
---|---|
Применяется к | flex-элементы, в том числе в потоке псевдоэлементов |
Наследуется | нет |
Проценты | относятся к внутреннему размеру главного flex-контейнера |
Обработка значения | как указано, но с относительной длиной, конвертируемой в абсолютные длины |
Animation type | длина, проценты или calc(); |
Синтаксис
/* Устанавливает <'ширину'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;
/* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
/* Автоматически изменяет размер на основе содержимого элемента */
flex-basis: content;
/* Глобальные значения */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;
Свойство flex-basis
задаётся через ключевое слово content
или через <'width'>
.
Значения
<'ширина'>
-
An absolute
<length>
, a<percentage>
родительского flex контейнера главное size свойство, или ключевое словоauto
. Негативные значения не допустимы. content
-
Автоматический задаёт размер на основе содержимого элемента flex.
Примечание: Это значение отсутствовало в первоначальном релизе Flexible Box Layout, и, следовательно, некоторые предыдущие релизы не будут поддерживать его. Аналогичный эффект можно получить, используя
auto
вместе с основным размером (width или height)auto
.Примечание:
- Первоначально,
flex-basis:auto
означает "смотреть на значенияwidth
илиheight
". - Затем
flex-basis:auto
был изменён на автоматический размер, а "main-size" было введено как ключевое слово, означающее "смотреть на значенияwidth
илиheight
". Это было реализован в баге 1032922. - Затем в баге 1093316 это было возвращено обратно, поэтому
auto
снова означает "смотреть на значенияwidth
илиheight
"; а новое ключевое словоcontent
было введено для автоматического размера. (Firefox bug 1105111 охватывает добавление этого ключевого слова).
- Первоначально,
Formal syntax
flex-basis =
content |
<'width'>
<width> =
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )
<anchor-size()> =
anchor-size( [ <anchor-element> || <anchor-size> ]? , <length-percentage>? )
<calc-size-basis> =
<intrinsic-size-keyword> |
<calc-size()> |
any |
<calc-sum>
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<anchor-element> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
Example
HTML
<ul class="container">
<li class="flex flex1">1: flex-basis test</li>
<li class="flex flex2">2: flex-basis test</li>
<li class="flex flex3">3: flex-basis test</li>
<li class="flex flex4">4: flex-basis test</li>
<li class="flex flex5">5: flex-basis test</li>
</ul>
<ul class="container">
<li class="flex flex6">6: flex-basis test</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: 20px;
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: 18px;
}
.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";
}
.flex6 {
flex-basis: fill;
}
.flex6:after {
content: "fill";
}
Results
Спецификации
Specification |
---|
CSS Flexible Box Layout Module Level 1 # flex-basis-property |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Controlling Ratios of flex items along the main axis
width