flex & flex-flow

flex is the shorthand for flex-grow, flex-shrink and flex-basis, in that order. flex-flow does the same for flex-direction and flex-wrap on the container.

flex: initial: same as 0 1 auto. It does not grow, but it can shrink.
flex: auto: same as 1 1 auto. It starts from its content and shares the free space.
flex: 1: same as 1 1 0%. It ignores the content so items end up the same size.
flex: none: same as 0 0 auto. It keeps its size and neither grows nor shrinks.
flex-flow: row wrap: sets direction and wrapping on a single line.

Example

The siblings have flex: 1 and the child with the item class has more text. With auto it starts from the size of its content, and with 1 it matches its siblings. Reduce the container width to see the difference between initial, which shrinks, and none, which does not.

ResultLiveContainer width100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child item">item with more text</div>
  <div class="child">3</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child item">item with more text</div>
  <div class="child">3</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  padding: 0.5rem;
}

.child {
  flex: 1;
  padding: 1rem;
}

.item {
  background: #d9d2f5;
  flex: initial;
}

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  padding: 0.5rem;
}

.child {
  flex: 1;
  padding: 1rem;
}

.item {
  background: #d9d2f5;
  flex: initial;
}

Edit the code or use the selectors: the result updates instantly.