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

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.
Note: Это значение отсутствовало в первоначальном релизе Flexible Box Layout, и, следовательно, некоторые предыдущие релизы не будут поддерживать его. Эквивалентный эффект можно получить, используя auto вместе с основным размером (width или heightauto.

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Базовая поддержкаChrome Полная поддержка 29
Полная поддержка 29
Полная поддержка 21
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Полная поддержка 22
Замечания
Полная поддержка 22
Замечания
Замечания Since Firefox 28, multi-line flexbox is supported.
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено 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.
Нет поддержки 18 — 28
Отключено
Отключено 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.
IE Полная поддержка 11
Замечания
Полная поддержка 11
Замечания
Замечания 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.
Opera Полная поддержка 12.1
Полная поддержка 12.1
Полная поддержка 15
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari Полная поддержка 9
Полная поддержка 9
Полная поддержка 7
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 4.4
Полная поддержка 4.4
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 29
Полная поддержка 29
Полная поддержка 25
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Mobile Полная поддержка Да
Полная поддержка Да
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 22
Замечания
Полная поддержка 22
Замечания
Замечания Since Firefox 28, multi-line flexbox is supported.
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено 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.
Нет поддержки 18 — 28
Отключено
Отключено 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.
Opera Android Полная поддержка 12.1
Полная поддержка 12.1
Полная поддержка 15
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari iOS Полная поддержка 9.2Samsung Internet Android ?
autoChrome Полная поддержка 21Edge Полная поддержка 12Firefox Полная поддержка 18IE Полная поддержка 11Opera Полная поддержка 12.1Safari Полная поддержка 7
С префиксом
Полная поддержка 7
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android ? Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 18Opera Android Полная поддержка 12.1Safari iOS ? Samsung Internet Android ?
contentChrome Нет поддержки НетEdge Полная поддержка 12Firefox Полная поддержка 61IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android ? Chrome Android Нет поддержки НетEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 61Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

See also

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

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