CSS Flexbox

Introduction

Creating layouts was once one of the most difficult parts of CSS. Developers used floats, positioning, and other techniques to place elements next to each other or center content.

CSS Flexbox provides a simpler and more powerful way to arrange elements in rows or columns.

What is Flexbox?

Flexbox stands for Flexible Box Layout. It is designed for creating one-dimensional layouts where elements are arranged primarily in a row or a column.

.container {
    display: flex;
}

When display: flex is applied to an element, that element becomes a flex container and its direct children become flex items.

Why Do We Need Flexbox?

Modern websites require flexible layouts that work on different screen sizes. Elements often need to be aligned horizontally, centered vertically, spaced evenly, reordered, or allowed to grow and shrink.

Real-World Analogy

Imagine a bookshelf containing several books. The bookshelf is the flex container, and each book is a flex item.

Flex Container & Flex Items

A Flexbox layout has two main parts: the flex container and the flex items.

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

.container {
    display: flex;
}

Main Axis & Cross Axis

Flexbox works using two imaginary directions called the main axis and the cross axis.

When flex-direction is row, the main axis runs horizontally and the cross axis runs vertically.

When flex-direction is column, the main axis runs vertically and the cross axis runs horizontally.

Creating a Flex Container

Use display: flex to create a flex container.

.container {
    display: flex;
}

The direct child elements are immediately placed next to each other in a row by default.

Example 1: Basic Flexbox

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

.container {
    display: flex;
    gap: 10px;
}

.box {
    width: 80px;
    height: 80px;
    background-color: #6c5ce7;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

flex-direction

The flex-direction property controls the direction in which flex items are arranged.

.container {
    display: flex;
    flex-direction: row;
}

.container {
    display: flex;
    flex-direction: column;
}

justify-content

The justify-content property aligns flex items along the main axis.

.container {
    display: flex;
    justify-content: center;
}

align-items

The align-items property aligns flex items along the cross axis.

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

flex-wrap

By default, flex items try to remain on one line. The flex-wrap property allows items to move onto additional lines when there is not enough space.

.container {
    display: flex;
    flex-wrap: wrap;
}

gap

The gap property adds consistent spacing between flex items.

.container {
    display: flex;
    gap: 20px;
}

You can also control row and column spacing separately.

.container {
    display: flex;
    flex-wrap: wrap;
    row-gap: 20px;
    column-gap: 10px;
}

Example 2: Navigation Bar

<nav class="navbar">
    <div class="logo">PrograMinds</div>

    <div class="links">
        <a href="#">Home</a>
        <a href="#">Courses</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </div>
</nav>

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    background-color: #2d3436;
}

.links {
    display: flex;
    gap: 20px;
}

.logo,
.links a {
    color: white;
}

.links a {
    text-decoration: none;
}

align-content

The align-content property controls the spacing between multiple rows or columns of wrapped flex items.

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

order

The order property changes the visual order of individual flex items without changing the HTML.

.item-1 {
    order: 3;
}

.item-2 {
    order: 1;
}

.item-3 {
    order: 2;
}

Items with smaller order values appear before items with larger order values.

flex-grow

The flex-grow property controls how much an item can grow when extra space is available.

.item {
    flex-grow: 1;
}

.item-1 {
    flex-grow: 1;
}

.item-2 {
    flex-grow: 2;
}

Item 2 receives twice as much of the available extra space as Item 1.

flex-shrink

The flex-shrink property controls how much an item can shrink when there is not enough space.

.item {
    flex-shrink: 1;
}

.important-item {
    flex-shrink: 0;
}

A value of 0 prevents the item from shrinking.

flex-basis

The flex-basis property defines the initial size of a flex item before remaining space is distributed.

.item {
    flex-basis: 200px;
}

The item starts with a size of 200px along the main axis.

The flex Shorthand

The flex property combines flex-grow, flex-shrink, and flex-basis.

flex: grow shrink basis;

.item {
    flex: 1 1 200px;
}

.item {
    flex: 1;
}

flex: 1 is commonly used when all flex items should share the available space equally.

align-self

The align-self property changes the cross-axis alignment of one individual flex item.

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

.special-item {
    align-self: flex-end;
}

The special item ignores the container alignment and uses its own alignment.

Example 3: Card Layout

<div class="cards">
    <div class="card">
        <h3>HTML</h3>
        <p>Learn webpage structure.</p>
    </div>

    <div class="card">
        <h3>CSS</h3>
        <p>Learn webpage styling.</p>
    </div>

    <div class="card">
        <h3>JavaScript</h3>
        <p>Learn webpage interactivity.</p>
    </div>
</div>

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

.card {
    flex: 1 1 200px;
    padding: 20px;
    background-color: #f1f2f6;
    border-radius: 10px;
}

Example 4: Centering Content

One of the most common uses of Flexbox is perfectly centering an element horizontally and vertically.

<div class="container">
    <div class="box">Centered</div>
</div>

.container {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    padding: 20px;
    background-color: #6c5ce7;
    color: white;
}

Flexbox Layout Process

Real-World Applications

Advantages

Common Beginner Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

CSS Flexbox is a powerful layout system used to arrange elements in rows or columns. It provides simple controls for direction, alignment, spacing, wrapping, ordering, growing, and shrinking.

Flexbox is commonly used for navigation bars, cards, forms, toolbars, responsive components, and content centering. Understanding the main axis and cross axis is the key to using Flexbox correctly.