Flexbox Layout Complete Guide

/* Create flex container */
.container {
    display: flex;
    flex-direction: row;    /* Horizontal layout (default) */
    flex-wrap: wrap;        /* Allow wrapping */
    gap: 1rem;              /* Modern spacing */
}

/* Alternative: inline-flex */
.inline-container {
    display: inline-flex;   /* Inline-level flex container */
}

/* Shorthand */
.shorthand {
    display: flex;
    flex-flow: row wrap;    /* direction + wrap */
}

/* Equal-width items */
.item {
    flex: 1;  /* All items share space equally */
}

/* Proportional sizing */
.sidebar {
    flex: 1;  /* Takes 1 part */
}
.main {
    flex: 3;  /* Takes 3 parts (3x wider) */
}

/* Fixed size item */
.fixed {
    flex: none;  /* Doesn't grow or shrink */
    width: 200px;
}

/* Content-based sizing */
.auto-size {
    flex: auto;  /* Flexible based on content */
}

/* Reorder items visually */
.header { order: -1; }  /* First */
.main { order: 1; }     /* Second */
.footer { order: 2; }   /* Third */

/* Individual alignment */
.special {
    align-self: center;  /* Override container's align-items */
}

/* Horizontal layout (default) */
.horizontal {
    display: flex;
    flex-direction: row;  /* Left to right */
}

/* Vertical layout */
.vertical {
    display: flex;
    flex-direction: column;  /* Top to bottom */
}

/* Reversed horizontal */
.reversed {
    display: flex;
    flex-direction: row-reverse;  /* Right to left */
}

/* Wrapping items */
.wrap-container {
    display: flex;
    flex-wrap: wrap;  /* Allow items to wrap to next line */
    gap: 1rem;
}

/* No wrapping (default) */
.no-wrap {
    display: flex;
    flex-wrap: nowrap;  /* Force single line, items shrink */
}

/* Combined shorthand */
.combined {
    display: flex;
    flex-flow: column wrap;  /* Vertical + wrapping */
}

/* Center horizontally and vertically (Holy Grail) */
.center-both {
    display: flex;
    justify-content: center;  /* Horizontal center */
    align-items: center;      /* Vertical center */
}

/* Space items evenly */
.space-evenly {
    display: flex;
    justify-content: space-between;  /* Max space between */
}

/* Align to end */
.align-end {
    display: flex;
    justify-content: flex-end;  /* Right align (row) */
    align-items: flex-end;      /* Bottom align */
}

/* Multi-line alignment */
.multi-line {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;  /* Space between lines */
}

/* Individual item alignment */
.container {
    display: flex;
    align-items: flex-start;  /* Default for all items */
}
.special-item {
    align-self: flex-end;  /* Override for this item */
}

/* flex-basis sets initial size on main axis */
.item {
    flex-basis: 200px;  /* 200px on main axis (width if row, height if column) */
}

/* auto - uses content or width/height */
.auto-basis {
    flex-basis: auto;   /* Uses width/height if set, else content size */
    width: 150px;       /* This is used as basis */
}

/* 0 vs auto difference */
.zero-basis {
    flex: 1 1 0%;  /* Ignores content size, pure ratio */
}
.auto-basis {
    flex: 1 1 auto;  /* Respects content size, then distributes */
}

/* Container: 1000px, 3 items with 100px basis each */
.container {
    display: flex;
    width: 1000px;
}

/* Free space = 1000 - (100 + 100 + 100) = 700px */

.item1 {
    flex: 1 0 100px;  /* Gets 1/4 of 700px = 175px → Total: 275px */
}
.item2 {
    flex: 2 0 100px;  /* Gets 2/4 of 700px = 350px → Total: 450px */
}
.item3 {
    flex: 1 0 100px;  /* Gets 1/4 of 700px = 175px → Total: 275px */
}
/* Sum of grows = 1 + 2 + 1 = 4 */

/* Equal width items */
.equal {
    flex: 1;  /* All get same width (flex: 1 1 0%) */
}

/* Container: 500px, 3 items want 300px each */
.container {
    display: flex;
    width: 500px;
}

/* Overflow = (300 + 300 + 300) - 500 = 400px */

.item1 {
    flex: 0 1 300px;  /* Shrink factor: 1, loses proportional space */
}
.item2 {
    flex: 0 2 300px;  /* Shrink factor: 2, loses 2x more */
}
.item3 {
    flex: 0 1 300px;  /* Shrink factor: 1 */
}
/* Sum = 1 + 2 + 1 = 4 */
/* item1 loses: 400 × (1/4) = 100px → 200px */
/* item2 loses: 400 × (2/4) = 200px → 100px */
/* item3 loses: 400 × (1/4) = 100px → 200px */

/* Prevent shrinking */
.no-shrink {
    flex-shrink: 0;  /* Maintains size */
}

/* Horizontal navigation */
.nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-item {
    flex: none;  /* Fixed size items */
}

/* Push last item to right */
.nav-end {
    margin-left: auto;  /* Pushes to right */
}

/* Full pattern */
<nav class="nav">
    <div class="logo">Logo</div>
    <div class="nav-item">Home</div>
    <div class="nav-item">About</div>
    <div class="nav-item nav-end">Login</div>
</nav>

/* Equal height cards */
.card-container {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.card {
    flex: 1 1 300px;  /* Min 300px, flexible */
    display: flex;
    flex-direction: column;
}

.card-content {
    flex: 1;  /* Takes remaining space */
}

.card-footer {
    margin-top: auto;  /* Push to bottom */
}

/* Full page flex layout */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header, .footer {
    flex: none;  /* Fixed height */
}

.main {
    flex: 1;  /* Fill remaining space */
    display: flex;
}

.sidebar {
    flex: 0 0 250px;  /* Fixed 250px width */
}

.content {
    flex: 1;  /* Fill remaining width */
}

.aside {
    flex: 0 0 200px;  /* Fixed 200px width */
}

/* Image + text side-by-side */
.media {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.media-image {
    flex: none;  /* Fixed width image */
    width: 100px;
}

.media-content {
    flex: 1;  /* Text fills remaining space */
}

/* Responsive: stack on mobile */
@media (max-width: 600px) {
    .media {
        flex-direction: column;
    }
}

/* Sticky footer pattern */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1;  /* Grows to fill space */
}

.footer {
    flex: none;  /* Always at bottom */
}

/* Flexbox responsive grid */
.flex-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.flex-grid > * {
    flex: 1 1 calc(33.333% - 1rem);  /* 3 columns */
    min-width: 250px;  /* Stack when too narrow */
}

/* 2 columns */
.two-col {
    flex: 1 1 calc(50% - 1rem);
    min-width: 300px;
}

/* 4 columns */
.four-col {
    flex: 1 1 calc(25% - 1rem);
    min-width: 200px;
}

/* Center single item */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Center multiple items vertically */
.vertical-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    gap: 1rem;
}

/* Center with margin auto */
.container {
    display: flex;
}
.centered-item {
    margin: auto;  /* Centers in both directions */
}