Flex items

In the previous lesson we set up the container. Now it is the items' turn: which one stretches over the free space, which one shrinks and which one stands apart from the rest. These properties are set on the items, not on the container.

Growing: flex-grow

flex-grow says what share of the free space an item takes. By default it is 0 — the item does not grow. The value 1 gives it all the remaining space:

<style>
  .bar { display: flex; gap: 8px; }
  .bar div { padding: 8px; background: lavender; }
  .grow { flex-grow: 1; }
</style>
 
<div class="bar">
  <div>Logo</div>
  <div class="grow">Stretched over the free space</div>
  <div>Log in</div>
</div>

If two items have flex-grow: 1 and flex-grow: 2, the second one gets twice as much free space.

Base size: flex-basis

flex-basis is the starting size of an item along the main axis, before flexbox hands out or takes away space. It is like width for a row:

<style>
  .row { display: flex; gap: 8px; }
  .row div { padding: 8px; background: honeydew; }
  .side { flex-basis: 120px; }
</style>
 
<div class="row">
  <div class="side">120px</div>
  <div>As wide as the content</div>
</div>

The flex shorthand

The three properties are usually written in one flex line: growing, shrinking and base size. The most common form is flex: 1: the items share the width equally, whatever the length of their text:

<style>
  .cols { display: flex; gap: 8px; }
  .cols div { flex: 1; padding: 8px; background: lightskyblue; }
</style>
 
<div class="cols">
  <div>Short</div>
  <div>This text is much longer</div>
  <div>Medium</div>
</div>

Form	Meaning
`flex: 1`	Grow, base size 0 — equal shares
`flex: auto`	Grow, starting from the content size
`flex: none`	Neither grow nor shrink

Aligning one item

align-self aligns a single item across the axis without touching the others. order changes the display order without editing the HTML:

<style>
  .row { display: flex; gap: 8px; height: 90px; background: whitesmoke; }
  .row div { padding: 8px; background: gold; }
  .bottom { align-self: flex-end; }
  .first { order: -1; background: tomato; }
</style>
 
<div class="row">
  <div>One</div>
  <div class="bottom">Pressed down</div>
  <div class="first">Shown first</div>
</div>

order changes only the picture: the keyboard and screen readers follow the order in the HTML. Use it with care.

Pushing to the right

The margin margin-left: auto in flexbox takes all the free space to the left of an item. This is how buttons are moved to the right edge of a header:

<style>
  .header { display: flex; gap: 12px; padding: 8px; background: lavender; }
  .login { margin-left: auto; }
</style>
 
<nav class="header">
  <a href="#">Home</a>
  <a href="#">Blog</a>
  <a href="#" class="login">Log in</a>
</nav>

Common mistake

When space runs out, flexbox shrinks all items — even those with a set width. An avatar turns into an oval. flex-shrink: 0 forbids an item to shrink:

<style>
  .msg { display: flex; gap: 8px; width: 240px; margin-bottom: 8px; }
  .avatar { width: 48px; height: 48px; border-radius: 50%; background: coral; }
  .fixed { flex-shrink: 0; }
</style>
 
<div class="msg">
  <div class="avatar"></div>
  <p>A very long message that does not fit on one line.</p>
</div>
<div class="msg">
  <div class="avatar fixed"></div>
  <p>A very long message that does not fit on one line.</p>
</div>

The top circle got squashed, the bottom one kept its size.

Thanks for reading!