Flexbox essentials
Flex works on one axis at a time. Set `flex-direction` first, then reason about `justify-content` (main axis) and `align-items` (cross axis). `gap` replaces margin hacks.
#flexbox#layout#gap
css
.row {
display: flex;
flex-direction: row; /* main axis = horizontal */
justify-content: space-between; /* along main axis */
align-items: center; /* across the other axis */
gap: 1rem;
flex-wrap: wrap;
}
.grow { flex: 1 1 0; } /* fill remaining space */
.fixed { flex: 0 0 240px; }