CSS Flexbox

Flexbox — short for Flexible Box Layout — is a modern CSS layout system designed to distribute space and align items within a container, even when their sizes are unknown or dynamic. It makes creating responsive, evenly spaced, and aligned layouts far simpler than older techniques like floats or inline-block.

Flexbox works on a one-dimensional axis — either a row (horizontal) or a column (vertical) — at a time.

How Flexbox Works

Flexbox involves two key components:

• Flex Container — The parent element with display: flex applied. It controls how its children are laid out.
• Flex Items — The direct children of the flex container. They are automatically laid out according to the flex rules.

.container {
    display: flex;
}

Just adding display: flex to a container immediately places all its children in a horizontal row.

Main Axis and Cross Axis

Flexbox has two axes:

• Main axis — The primary direction items are placed. Horizontal by default (left to right).
• Cross axis — Perpendicular to the main axis. Vertical by default (top to bottom).

Flex Container Properties

flex-direction

Sets the direction of the main axis — the direction flex items are placed.

.container {
    display: flex;
    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

Aligns flex items along the main axis.

.container {
    display: flex;
    justify-content: flex-start;    /* Items at the start (default) */
    justify-content: flex-end;      /* Items at the end */
    justify-content: center;        /* Items centered */
    justify-content: space-between; /* Equal space between items, none at edges */
    justify-content: space-around;  /* Equal space around each item */
    justify-content: space-evenly;  /* Perfectly equal space everywhere */
}

align-items

Aligns flex items along the cross axis.

.container {
    display: flex;
    height: 200px;
    align-items: stretch;     /* Items stretch to fill container height (default) */
    align-items: flex-start;  /* Items align at the top */
    align-items: flex-end;    /* Items align at the bottom */
    align-items: center;      /* Items centered vertically */
    align-items: baseline;    /* Items align by their text baseline */
}

flex-wrap

Controls whether items wrap to the next line when they run out of space.

.container {
    display: flex;
    flex-wrap: nowrap;   /* All items on one line (default) */
    flex-wrap: wrap;     /* Items wrap to the next line */
    flex-wrap: wrap-reverse; /* Items wrap in reverse order */
}

gap

Adds space between flex items without using margin.

.container {
    display: flex;
    gap: 20px;       /* Same gap between all items */
    gap: 10px 20px;  /* Row gap 10px, column gap 20px */
}

Flex Item Properties

flex-grow

Controls how much a flex item grows to fill available space. A value of 1 means the item takes up equal available space. A value of 2 means it takes up twice as much as items with value 1.

.item-a { flex-grow: 1; }   /* Takes 1 part of available space */
.item-b { flex-grow: 2; }   /* Takes 2 parts — twice as wide as item-a */

flex-shrink

Controls how much a flex item shrinks when there is not enough space. Default is 1 (items shrink equally). Setting to 0 prevents shrinking.

.item {
    flex-shrink: 0;  /* This item will not shrink */
}

flex-basis

Sets the initial size of a flex item before free space is distributed.

.item {
    flex-basis: 200px;  /* Start at 200px, then grow or shrink */
    flex-basis: auto;   /* Based on the item's own width/height */
}

flex Shorthand

Combines grow, shrink, and basis in one property.

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

align-self

Overrides align-items for a single specific flex item.

.special-item {
    align-self: flex-end;  /* This item aligns at the bottom even if others are centered */
}

Centering with Flexbox

Flexbox makes both vertical and horizontal centering trivially easy.

.center-me {
    display: flex;
    justify-content: center;  /* Horizontal center */
    align-items: center;      /* Vertical center */
    height: 300px;
}

Practical Example — Navigation Bar

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1a1a2e;
    padding: 0 30px;
    height: 60px;
}

nav .logo {
    color: white;
    font-size: 22px;
    font-weight: bold;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 25px;
    margin: 0;
    padding: 0;
}

nav ul li a {
    color: #ccc;
    text-decoration: none;
    font-size: 15px;
}

nav ul li a:hover {
    color: white;
}

Practical Example — Card Grid

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

.card {
    flex: 1 1 280px;   /* Grow and shrink, minimum 280px base */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    background-color: white;
}

Summary

Flexbox is the modern go-to for one-dimensional layouts. A flex container with display: flex arranges its children in a row by default. justify-content aligns items on the main axis, align-items aligns on the cross axis, and gap handles spacing. flex-grow makes items expand to fill available space. Flexbox is ideal for navigation bars, button groups, centered content, and responsive card rows.