CSS Flexbox

/* Parent becomes a flex container */
.container {
    display: flex;
    /* All direct children become flex items */
}

/* Inline flex (not full-width) */
.inline-flex {
    display: inline-flex;
}

flex-direction: row (default)
Main axis → → → → → → →
Cross axis ↓

flex-direction: column
Main axis ↓
Cross axis → → → → → → →

.container {
    display: flex;
    flex-direction: row;              /* → Left to right (default) */
    /* flex-direction: row-reverse;  ← Right to left */
    /* flex-direction: column;       ↓ Top to bottom */
    /* flex-direction: column-reverse; ↑ Bottom to top */
}

.container {
    display: flex;
    justify-content: flex-start;     /* ← Start */
    /* justify-content: flex-end;   → End */
    /* justify-content: center;     ↔ Center */
    /* justify-content: space-between;  ← → ← → (equal space between) */
    /* justify-content: space-around;   ↙ → ← → ↘ (equal space around) */
    /* justify-content: space-evenly;   ↔ All gaps equal */
}

.container {
    display: flex;
    align-items: stretch;            /* Fill container height (default) */
    /* align-items: flex-start;     ↑ Top */
    /* align-items: flex-end;       ↓ Bottom */
    /* align-items: center;         ↔ Vertical center */
    /* align-items: baseline;       Text baseline aligned */
}

.container {
    display: flex;
    flex-wrap: wrap;                 /* Items wrap to next line */
    /* flex-wrap: nowrap;           (default — items shrink) */
    /* flex-wrap: wrap-reverse;     Wraps upward */
}

/* Gap between items (modern — no margin hacks!) */
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;                       /* Horizontal and vertical gap */
    row-gap: 16px;                   /* Only vertical */
    column-gap: 24px;                /* Only horizontal */
}

.item {
    flex-grow: 0;     /* How much to grow (0 = don't grow) */
    flex-shrink: 1;   /* How much to shrink (1 = shrink normally) */
    flex-basis: auto; /* Initial size before growing/shrinking */
    
    /* Shorthand */
    flex: 1;           /* grow:1 shrink:1 basis:0 (equal space) */
    flex: 0 0 200px;   /* Fixed 200px, don't grow or shrink */
    flex: 1 1 auto;    /* Grow and shrink equally */
}

/* Alignment override per item */
.item {
    align-self: center;  /* Override container's align-items */
    /* align-self: flex-start; */
    /* align-self: stretch; */
}

/* Order (visual order, not DOM order) */
.item { order: 2; }     /* Default is 0 */

/* Centering (the most common task!) */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Holy Grail Layout */
.page {
    display: flex;
    min-height: 100vh;
}
.sidebar-left { width: 200px; }
.main { flex: 1; }            /* Takes remaining space */
.sidebar-right { width: 200px; }

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    height: 64px;
}

/* Card grid that wraps */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.card {
    flex: 1 1 300px;          /* Grow to fill, min 300px */
    max-width: 400px;         /* But not wider than 400px */
}

/* Sticky footer */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main { flex: 1; }
footer { margin-top: auto; }