Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.
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.
-
Note: Это значение отсутствовало в первоначальном релизе Flexible Box Layout, и, следовательно, некоторые предыдущие релизы не будут поддерживать его. Эквивалентный эффект можно получить, используя
auto
вместе с основным размером (width или height)auto
.History:
- Originally,
flex-basis:auto
meant "look at mywidth
orheight
property". - Then,
flex-basis:auto
was changed to mean automatic sizing, and "main-size" was introduced as the "look at mywidth
orheight
property" keyword. It was implemented in bug 1032922. - Then, that change was reverted in bug 1093316, so
auto
once again means "look at mywidth
orheight
property"; and a newcontent
keyword is being introduced to trigger automatic sizing. (баг 1105111 covers adding that keyword).
- Originally,
Formal syntax
content | <'width'>
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
Компьютеры | Мобильные | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Базовая поддержка | Chrome
Полная поддержка
29
| Edge
Полная поддержка
12
| Firefox
Полная поддержка
22
| IE
Полная поддержка
11
| Opera
Полная поддержка
12.1
| Safari
Полная поддержка
9
| WebView Android
Полная поддержка
4.4
| Chrome Android
Полная поддержка
29
| Edge Mobile
Полная поддержка
Да
| Firefox Android
Полная поддержка
22
| Opera Android
Полная поддержка
12.1
| Safari iOS Полная поддержка 9.2 | Samsung Internet Android ? |
auto | Chrome Полная поддержка 21 | Edge Полная поддержка 12 | Firefox Полная поддержка 18 | IE Полная поддержка 11 | Opera Полная поддержка 12.1 | Safari
Полная поддержка
7
| WebView Android ? | Chrome Android ? | Edge Mobile Полная поддержка Да | Firefox Android Полная поддержка 18 | Opera Android Полная поддержка 12.1 | Safari iOS ? | Samsung Internet Android ? |
content | Chrome Нет поддержки Нет | Edge Полная поддержка 12 | Firefox Полная поддержка 61 | IE Нет поддержки Нет | Opera Нет поддержки Нет | Safari Нет поддержки Нет | WebView Android ? | Chrome Android Нет поддержки Нет | Edge Mobile Полная поддержка Да | Firefox Android Полная поддержка 61 | Opera Android Нет поддержки Нет | Safari iOS Нет поддержки Нет | Samsung Internet Android Нет поддержки Нет |
Легенда
- Полная поддержка
- Полная поддержка
- Нет поддержки
- Нет поддержки
- Совместимость неизвестна
- Совместимость неизвестна
- Смотрите замечания реализации.
- Смотрите замечания реализации.
- Пользователь должен сам включить эту возможность.
- Пользователь должен сам включить эту возможность.
- Требует вендорный префикс или другое имя для использования.
- Требует вендорный префикс или другое имя для использования.
See also
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Controlling Ratios of flex items along the main axis
width