Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

flex-basis CSS свойство задает базовые размеры флекс элемента, а именно ширину.  Это свойство определяет размер содержимого контента,  если оно не было заданно свойством  box-sizing.

Начальное значение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> родительского контейнера flexmain size property, or the keyword auto. Negative values are invalid.
content
Автоматический задает размер на основе содержимого элемента flex.
Note: This value was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it. The equivalent effect can be had by using auto together with a main size (width or height) of auto.

History:

  • Originally, flex-basis:auto meant "look at my width or height property".
  • Then, flex-basis:auto was changed to mean automatic sizing, and "main-size" was introduced as the "look at my width or height property" keyword. It was implemented in bug 1032922.
  • Then, that change was reverted in bug 1093316, so auto once again means "look at my width or height property"; and a new content keyword is being introduced to trigger automatic sizing. (баг 1105111 covers adding that keyword).

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

ВозможностьChromeEdgeFirefoxInternet ExplorerOperaSafari
Базовая поддержка

29

21 -webkit-

12

12 -webkit-

221

49 -webkit-

44 -webkit- 2

18 — 283

114

12.1

15 -webkit-

9

7 -webkit-

auto2112181112.17 -webkit-
content Нет12 Нет Нет Нет Нет
ВозможностьAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Базовая поддержка

29

21 -webkit-

29

21 -webkit-

Да

Да -webkit-

221

49 -webkit-

44 -webkit- 2

18 — 283

12.1

15 -webkit-

9.2 ?
auto ? ? Да1812.1 ? ?
content ? Нет Да Нет Нет Нет Нет

1. Since Firefox 28, multi-line flexbox is supported.

2. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

4. When a non-auto flex-basis is specified, Internet Explorer 10 and 11 always uses a content-box box model to calculate the size of a flex item, even if box-sizing: border-box is applied to the element. See Flexbug #7 for more info.

See also

Метки документа и участники

Внесли вклад в эту страницу: MishaKazakov, fundzi
Обновлялась последний раз: MishaKazakov,