CSS-свойство `flex-basis`

Свойство flex-basis CSS задаёт исходный размер flex-элемента по главной оси. Оно задаёт размер поля содержимого, если он не переопределён свойством box-sizing.

Попробуйте

flex-basis: auto;

flex-basis: 0;

flex-basis: 200px;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">Item One</div>
  <div>Item Two</div>
  <div>Item Three</div>
</section>

.default-example {
  border: 1px solid #c5c5c5;
  width: auto;
  max-height: 300px;
  display: flex;
}

.default-example > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

В этом примере свойства flex-grow и flex-shrink для всех трёх элементов заданы как 1, что означает, что flex-элемент может увеличиваться и уменьшаться относительно исходного значения flex-basis.

В демонстрации изменяется значение flex-basis, заданное для первого flex-элемента, в результате чего он увеличивается или уменьшается, чтобы заполнить доступное пространство. Размеры остальных flex-элементов тоже изменятся; их размер будет не меньше min-content. Например, если для первого элемента задать значение flex-basis, равное 200px, его исходный размер будет 200px, но затем он уменьшится, чтобы поместиться в доступное пространство.

Если для flex-basis задано значение, отличное от auto, и для того же flex-элемента задано свойство width (или height в случае flex-direction: column), приоритет имеет значение flex-basis.

Синтаксис

/* Specify <'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: 50%;
flex-basis: auto;

/* Intrinsic sizing keywords */
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* Automatically size based on the flex item's content */
flex-basis: content;

/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: revert;
flex-basis: revert-layer;
flex-basis: unset;

Свойство flex-basis задаётся либо ключевым словом content, либо значением <'width'>.

Значения

content

Обозначает автоматический размер, основанный на содержимом flex-элемента.

<'width'>

Любая из следующих единиц измерения:

• <length> задаёт абсолютное значение.
• <percentage> задаёт процент от ширины или высоты области содержимого содержащего блока. Процентные значения flex-basis вычисляются относительно flex-контейнера. Если размер flex-контейнера не определён, используемое значение для flex-basis равно content.
• auto использует значение свойства width при горизонтальном направлении письма и значение свойства height при вертикальном направлении письма; если соответствующее значение также равно auto, вместо него используется значение content.
• max-content задаёт внутреннюю предпочтительную ширину.
• min-content задаёт внутреннюю минимальную ширину.
• fit-content задаёт максимально возможный размер области содержимого содержащего блока, ограниченный значениями min-content и max-content и вычисленный на основе содержимого текущего элемента.

Формальное определение

Формальный синтаксис

flex-basis = 
  content |
  <'width'>

Примеры

Задание исходных размеров flex-элементов

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: 14px;
  text-align: center;
  position: relative;
}

.flex::after {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  margin-top: 10px;
  width: 100%;
  color: #333333;
  font-size: 12px;
}

.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";
}

Результат

Flex-базис 0 и 0%

В этом примере показана разница между flex-basis, равным 0, и flex-basis, равным 0%, когда свойству flex-direction задано значение column, а высота flex-контейнеров и flex-элементов не задана; в то время как 0 — это абсолютная длина, процентные значения flex-basis вычисляются как значения content.

HTML

Мы добавим два flex-контейнера с одинаковой структурой, которые будут оформлены одинаково, за исключением значений flex-basis. В каждом контейнере два дочерних элемента: заголовок <div> и <section>. Элемент <section> содержит дочерний элемент <div>, который не будет flex-элементом, но ему будет задана высота.

<div class="container basis-0">
  <div>heading</div>
  <section>
    <div class="content">flex-basis: 0;</div>
  </section>
</div>
<div class="container basis-0-percent">
  <div>heading</div>
  <section>
    <div class="content">flex-basis: 0%;</div>
  </section>
</div>

CSS

Мы задаём контейнерам стиль flex-контейнеров со строчным отображением, чтобы они располагались рядом и их было удобнее сравнивать. Свойству flex-direction задаём значение column. Для flex-элементов первого контейнера задано значение flex-basis, равное 0, а для flex-элементов второго контейнера — значение flex-basis, равное 0%. Ни для flex-контейнеров, ни для их flex-элементов высота явно не задана; однако высота элементов section должна быть не меньше 200px, а высота их дочерних элементов равна 300px.

.container {
  width: 40vw;
  padding: 1rem;
  border: 1px dashed blue;

  display: inline-flex;
  flex-direction: column;
}

section {
  outline: 1px solid red;

  overflow: auto;
  min-height: 200px;
}

.content {
  background: wheat;
  height: 300px;
}

.container.basis-0 > * {
  flex-basis: 0;
}
.container.basis-0-percent > * {
  flex-basis: 0%;
}

Результат

В первом контейнере с flex-basis: 0 элемент <section> имеет исходный размер по главной оси, равный нулю, и увеличивается до минимальной высоты 200px. Во втором контейнере с flex-basis: 0% элемент <section> имеет исходный размер по главной оси, равный 300px, поскольку высота flex-контейнера не задана и процентные значения flex-basis вычисляются как значение content.

Спецификации

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

См. также

• Сокращённое свойство flex
• inline-size
• Основные понятия flexbox
• Управление соотношениями размеров flex-элементов вдоль главной оси
• Модуль гибкой компоновки CSS