flex-direction — row or column

.container {
    display: flex;
    flex-direction: row;      /* DEFAULT - items left to right → */
}
.container {
    flex-direction: column;   /* items top to bottom ↓ (a vertical stack) */
}

flex-wrap and gap — spacing and responsiveness

.container {
    display: flex;
    flex-wrap: wrap;      /* items wrap to the next line if they don't fit */
    gap: 20px;            /* even space BETWEEN all items */
}

flex-grow, flex-shrink, flex-basis — how items size

.item {
    flex-grow: 1;      /* how much to GROW to fill extra space (0 = don't) */
    flex-shrink: 1;    /* how much to SHRINK if space is tight (0 = don't) */
    flex-basis: 200px; /* the starting/ideal size before grow/shrink */
}

The flex Shorthand — the one you'll actually use

flex: 1;              /* grow:1, shrink:1, basis:0 - "take equal share" */
flex: 0 0 200px;     /* grow:0 shrink:0 basis:200px - "fixed 200px" */

/* Common layout: sidebar fixed, content fills the rest */
.sidebar { flex: 0 0 250px; }   /* always 250px */
.content { flex: 1; }           /* takes all remaining space */

align-self — override for one item

.container { display: flex; align-items: flex-start; }

.special {
    align-self: center;    /* THIS one item centers, ignoring the container */
}

While align-items on the container aligns ALL items on the cross axis, align-self lets a SINGLE item override that and align itself differently. So if all items sit at the top but you want one centered, give just that item align-self: center. It's the exception handler for flexbox alignment — most items follow the container's rule, but one can break away. A small but handy property for those "everything aligned except this one" moments.

Exam Corner