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 2020.

* Learn more
* See full compatibility
* Report feedback
CSS свойство **`flex-basis`** задаёт базовый размер флекс элемента по **основной оси**. Это свойство определяет размер контент-бокса, если не задано иначе через `box-sizing`.

Интерактивный пример
--------------------

**Примечание:** в случае, если для элемента одновременно заданы `flex-basis` (отличное от `auto`) и `width` ( или `height` в случае `flex-direction: column`), `flex-basis` имеет приоритет.

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | flex-элементы, в том числе в потоке псевдоэлементов |
| Наследуется | нет |
| Проценты | относятся к внутреннему размеру главного flex-контейнера |
| Обработка значения | как указано, но с относительной длиной, конвертируемой в абсолютные длины |
| Animation type | длина, проценты или calc(); |

Синтаксис
---------


```css
/\* Устанавливает <'ширину'> \*/
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    | (en-US)  
  <'width'>    
  
```

Example
-------

### HTML


```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


```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 |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-basis-property |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Controlling Ratios of flex items along the main axis (en-US)*
* `width`