Flex Items

grow, shrink, basis

flex-grow how much extra space a item takes, flex-shrink how much it shrinks when space is tight, flex-basis its starting size. flex: 1 is shorthand for 1 1 0% — "share space equally".

Equal-width columns

Each .col grows to fill available space equally.

.row { display: flex; gap: 16px; }
.col { flex: 1; }
.col.wide { flex: 2; }   /* takes twice the space */

align-self & order

align-self overrides the container's align-items for one item. order changes visual order without touching the HTML.

Quick check: Which property controls how much a flex item grows to fill extra space?

• flex-shrink
• flex-basis
• flex-grow
• flex-wrap