Flexible sizing

Start with a basis, then distribute positive or negative free space.

flex-basis

10rem basis18rem basis

The basis is the starting main size before growing or shrinking.

Positive space: flex-grow

grow 1grow 2

The second item receives twice the share of available positive space.

Negative space: flex-shrink

shrink 0shrink 1shrink 2

Shrink factors help remove negative space, though content can set a practical limit.

The flex shorthand

flex: 1 1 12remflex: 2 1 12rem

Read each value as grow, shrink, then basis.

Important HTML

Demo items show grow and shrink behavior.

<div class="grow-demo">
  <span class="grow-one">1</span>
  <span class="grow-two">2</span>
</div>

Important CSS

Grow and shrink control leftover and shortage space.

.grow-demo .grow-one { flex-grow: 1; }
.grow-demo .grow-two { flex-grow: 2; }
.shrink-demo .shrink-zero { flex-shrink: 0; }