Flex Items & Responsive Flex

The flex shorthand

On each item, flex sets how it grows and shrinks. flex: 1 means “share the space equally”. Different numbers give different proportions.

<style>
  .bar { display:flex; gap:8px; }
  .bar > div { background:#4338ca; color:#fff; padding:14px; border-radius:8px; text-align:center; }
  .one { flex: 1; } .two { flex: 2; }
</style>
<div class="bar">
  <div class="one">flex: 1</div>
  <div class="two">flex: 2 (twice as wide)</div>
  <div class="one">flex: 1</div>
</div>

The flex number on each item is a share, not a fixed width. The middle item has flex: 2 and the outer two have flex: 1, so the row is split into 1 + 2 + 1 = four parts: the middle takes two of them, the others one each. That is why the middle box is exactly twice as wide. Change flex: 2 to flex: 3 and the middle would grow even bigger relative to its neighbours.

Reorder and align one item

order changes an item’s position without touching the HTML; align-self aligns a single item differently from the rest.

<style>
  .row2 { display:flex; gap:8px; align-items:flex-start; height:90px; }
  .row2 > div { background:#4338ca; color:#fff; padding:10px; border-radius:8px; }
  .first { order: -1; }            /* jump to the front */
  .down  { align-self: flex-end; } /* drop to the bottom */
</style>
<div class="row2">
  <div>A</div>
  <div class="down">B (pushed down)</div>
  <div class="first">C (moved first)</div>
</div>

In the HTML the order is A, B, C — but on screen C comes first because order: -1 pulls it ahead (lower numbers come earlier; the default is 0). Item B drops to the bottom because align-self: flex-end overrides the container’s alignment for that one item only, while A and C stay at the top. So order rearranges left-to-right and align-self adjusts a single item up or down.