flex-basis

В этом примере свойства 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'>.

<'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 и вычисленный на основе содержимого текущего элемента.

content

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

flex-basis = 
  content    |
  <'width'>  

<width> = 
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             |
  <anchor-size()>                           

<length-percentage> = 
  <length>      |
  <percentage>  

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <intrinsic-size-keyword>  |
  <calc-size()>             |
  any                       |
  <calc-sum>                

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

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: #333;
  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-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>
    flex-basis: 0;
    <div class="content"></div>
  </section>
</div>
<div class="container basis-0-percent">
  <div>heading</div>
  <section>
    flex-basis: 0%;
    <div class="content"></div>
  </section>
</div>

CSS

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

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

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

section {
  border: 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 flexible box layout