CSS свойство flex-basis
задает базовый размер флекс элемента по основной оси. Это свойство определяет размер контент-бокса, если не задано иначе через box-sizing
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Внимание: в случае, если для элемента одновременно заданы 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
было введено для автоматического размера. (баг 1105111 охватывает добавление этого ключевого слова).
- Первоначально,
Formal syntax
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
Specifications
Specification | Status | Comment |
---|---|---|
CSS Flexible Box Layout Module Определение 'flex-basis' в этой спецификации. |
Кандидат в рекомендации | Initial definition |
Browser compatibility
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
See also
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Controlling Ratios of flex items along the main axis
width