CSS Flexbox: Complete Layout Guide

What is Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout model that makes it easy to design flexible, responsive layouts without using floats or positioning hacks.

Creating a Flex Container

.container {
    display: flex;
}

All direct children become flex items.

Flex Direction

.container {
    flex-direction: row;          /* Default: left to right */
    flex-direction: row-reverse;  /* Right to left */
    flex-direction: column;       /* Top to bottom */
    flex-direction: column-reverse; /* Bottom to top */
}

Justify Content (Main Axis)

.container {
    justify-content: flex-start;    /* Default: items at start */
    justify-content: flex-end;      /* Items at end */
    justify-content: center;        /* Items centered */
    justify-content: space-between; /* Equal space between */
    justify-content: space-around;  /* Equal space around */
    justify-content: space-evenly;  /* Truly equal space */
}

Align Items (Cross Axis)

.container {
    align-items: stretch;     /* Default: fill container */
    align-items: flex-start;  /* Items at start */
    align-items: flex-end;    /* Items at end */
    align-items: center;      /* Items centered */
    align-items: baseline;    /* Align by text baseline */
}

Flex Wrap

.container {
    flex-wrap: nowrap;   /* Default: single line */
    flex-wrap: wrap;     /* Multiple lines */
    flex-wrap: wrap-reverse;
}

Gap

.container {
    gap: 20px;           /* Both row and column gap */
    row-gap: 20px;       /* Gap between rows */
    column-gap: 10px;    /* Gap between columns */
}

Flex Item Properties

Flex Grow

.item {
    flex-grow: 0;  /* Default: don't grow */
    flex-grow: 1;  /* Grow to fill space */
}

Flex Shrink

.item {
    flex-shrink: 1;  /* Default: can shrink */
    flex-shrink: 0;  /* Don't shrink */
}

Flex Basis

.item {
    flex-basis: auto;   /* Default: use width/height */
    flex-basis: 200px;  /* Start at 200px */
    flex-basis: 25%;    /* Start at 25% */
}

Flex Shorthand

.item {
    flex: 1;           /* flex: 1 1 0 */
    flex: 1 0 200px;   /* grow shrink basis */
}

Common Layouts

Centered Content

.center-all {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

Navigation Bar

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

Card Grid

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 300px;
    max-width: 400px;
}

Holy Grail Layout

.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header, .footer {
    flex-shrink: 0;
}

.main {
    display: flex;
    flex: 1;
}

.sidebar {
    flex: 0 0 200px;
}

.content {
    flex: 1;
}

Best Practices

1. Use flex-wrap: wrap for responsive layouts
2. Prefer gap over margins for spacing
3. Use min-width: 0 to allow items to shrink below content size
4. Combine with media queries for responsive design

Use our Flexbox Generator to visualize and generate Flexbox layouts.