To be clear, flex-basis applies to the item in a Flex container, not to the Flex Container. Also, flex-basis is always set to both flex-grow and flex-shrink. This will make Flex more useful

What does flex-basis stand for

Flex -grow: sets the size of the Flex item before it is shrunk, that is, the initial size of the Flex item when it is placed on the main axis. Set the shrinkage ratio of the Flex Item by how much space it needs to reduce (the total width of the Flex item before shrinking – the width of the Flex Container, i.e. the amount of space that the Flex Container does not have)

Flex-basis is set to 0

When only flex-basis is set

When a Flex item is set to flex-basis:0 only, the flex item collapses to the smallest possible width:

.wrapper1 {
  display: flex;
  border: 2px solid lime;
}
.item11 {
  flex-basis: 0;
}

<div class="wrapper1">
  <div class="item11">i am width 0</div>
</div>

Copy the code

In addition to setting flex-basis, also set flex-grow

When flex-grow is set, it allocates space based on flex-grow. When allocating space, each Flex item is taken into account as a whole, with no distinction between the length of the Flex item.

.item1 {
  background: lightsalmon;
}
.item2 {
  background: hotpink;
}
.item3 {
  background: lightgreen;
}
.item1,
.item2,
.item3 {
  flex-grow: 1;
  flex-shrink: 1; // It doesn't matter at the moment, because flex-basis is set to 0 and the item is already folded to its minimum width
  flex-basis: 0;
}

<div class="wrapper">
  <div class="item1">11111111111111111111111111111111111111111</div>
  <div class="item2">2</div>
  <div class="item3">333333333</div>
</div>
Copy the code

When I resize the Flex Container (shrink the screen), ITEM1 will be fixed in width, leaving Item2 and Item3 splitting the space. When I resize (shrink the screen again), Item3 will be fixed in width, and Item2 will occupy the remaining space until no one can shrink anymore

When you set overflow:hidden for item1, Item2, and Item3, the effect will be different. Since each item has a flex-grow of 1, the rate of expansion is the same, and the flex-basis is set to 0, the item will be counted as a whole, not counting the content length of the item. That would bisect the space

summary

Flex-basis is set to auto

Set flex-basis to auto, just like width:auto

When paired with flex-grow, the size of the Flex item is taken into account, and the size of the item is allocatedThe surroundingUnder the condition of consistent scaling ratio, there will be a long content length and a large space. Flex-shrink also works the same way, except that a Flex item increases space and a Flex item decreases space



Flex-grow :1 play a role:



Flex-shrink :1 helps:

summary

Let’s do another example

extra: min-width,max-width, width vs flex-basis

P.S. If the above content is wrong, please correct it

Refenrences: medium.com/learnfactor… www.samanthaming.com/flexbox30/2… Codepen. IO/enxaneta/fu… Stackoverflow.com/questions/4…