Css Flexbox
Justify Content
Css With Html
Web Development
Space Elements

Introduction to CSS Flexbox: justify-content, align-items, flex-direction with Practical Examples

Pranshi Verma

14 min readOct 16, 2026

A Complete Beginner-Friendly Guide to CSS Flexbox for Students | Learn to Align, Arrange, and Space Elements Easily

Have you ever tried to place three boxes in a single row, center a button inside a container, or align a navigation menu properly?

You may have used margins, padding, floats, or even complicated CSS code to achieve these layouts. But CSS provides a powerful layout system that makes these tasks much easier: Flexbox.

Flexbox, short for Flexible Box Layout, is a CSS layout model designed to arrange elements efficiently within a container. It helps you control the direction, alignment, spacing, and distribution of elements without relying on complicated positioning techniques.

In this tutorial, we will explore four essential Flexbox concepts:

display: flex
justify-content
align-items
flex-direction

We will start from the basics, understand the main axis and cross axis, explore every important value with examples, and finish by building a complete practical project.

By the end, you will be able to create horizontal menus, vertically centered content, flexible card layouts, and more.

1. What Is CSS Flexbox?

CSS Flexbox is a layout system that helps arrange elements inside a container in a row or a column.

For example, imagine you have three boxes:

HTML
CSS
JavaScript

Without a suitable layout system, you might need to adjust their margins or use floats to position them. With Flexbox, you can arrange and align these boxes using a few CSS properties.

Basic Flexbox syntax

<div class="container">
    <div class="box">HTML</div>
    <div class="box">CSS</div>
    <div class="box">JavaScript</div>
</div>

.container {
    display: flex;
}

That’s it! The three boxes become flex items and are arranged horizontally by default.

How does Flexbox work?

Flexbox has two important parts:

1. Flex container: The parent element on which you apply display: flex.

2. Flex items: The direct children of the flex container.

For example:

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

.container {
    display: flex;
}

Here, .container is the flex container, and its three direct child <div> elements are flex items.

Important: Applying display: flex to a parent affects its direct children, not every nested element automatically.

2. Understanding the Main Axis and Cross Axis

Before learning the Flexbox properties, you must understand two important terms: the main axis and the cross axis.

These axes determine how Flexbox arranges and aligns elements.

Main axis: The direction in which the flex items are laid out.
Cross axis: The direction perpendicular to the main axis.

By default, Flexbox uses flex-direction: row, so the main axis runs horizontally and the cross axis runs vertically.

<figure> <img src=”https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox/flexbox_axes.png" alt=”Flexbox main axis and cross axis illustration” /> <figcaption>Understanding the main axis and cross axis is the foundation of CSS Flexbox.</figcaption> </figure>

Think of the main axis as the direction in which your boxes are arranged. The cross axis runs across that direction.

For a typical left-to-right page:

This distinction is essential because justify-content aligns items along the main axis, whereas align-items aligns them along the cross axis.

3. The `display: flex` Property

The first step in using Flexbox is applying display: flex to a parent element.

Example 1: Without Flexbox

HTML:

<div class="container">
    <div class="box">One</div>
    <div class="box">Two</div>
    <div class="box">Three</div>
</div>

CSS:

.box {
    background-color: lightblue;
    padding: 20px;
    margin: 5px;
}

Because the child elements are <div> elements, they normally appear in separate rows.

Example 2: With Flexbox

Add this rule:

.container {
    display: flex;
}

Now the direct child boxes are arranged in a row by default.

Complete example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First Flexbox Example</title>
<style>
        .container {
            display: flex;
            background-color: lightgray;
            padding: 10px;
        }
        .box {
            background-color: lightblue;
            padding: 20px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <h2>My First Flexbox Layout</h2>
    <div class="container">
        <div class="box">HTML</div>
        <div class="box">CSS</div>
        <div class="box">JavaScript</div>
    </div>
</body>
</html>

Try it yourself: Remove display: flex and refresh the browser. Then add it again and compare the results.

This simple experiment shows how Flexbox changes the layout behavior of the direct children.

4. CSS `flex-direction`

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

Its four commonly used values are:

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

Let’s understand each one.

4.1 `flex-direction: row`

This is the default value.

Items are arranged horizontally in the main-start to main-end direction. In a typical left-to-right layout, this means left to right.

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

Example:

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

.container {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.container div {
    background-color: lightblue;
    padding: 20px;
}

The items appear in a horizontal row.

Use case: Navigation menus, horizontal toolbars, and rows of cards.

4.2 `flex-direction: row-reverse`

This value arranges items horizontally in the reverse main-axis direction.

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

In a typical left-to-right layout, the visual order becomes:

3 2 1

The items’ visual arrangement is reversed, but their underlying HTML order is unchanged.

Use case: Special layouts where the visual arrangement needs to run in the opposite direction.

Accessibility tip: Avoid using reverse directions to create a reading order that conflicts with the HTML source order. Screen readers and keyboard navigation generally follow the document’s underlying structure.

4.3 `flex-direction: column`

This value arranges items vertically.

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

The items appear like this:

1
2
3

Use case: Vertical menus, stacked forms, and content sections.

4.4 `flex-direction: column-reverse`

This value reverses the vertical main-axis direction.

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

For three items, the visual arrangement becomes:

3
2
1

Again, the HTML source order does not change.

Quick comparison

Remember: Changing flex-direction also changes which axis is the main axis. That means justify-content and align-items will work along different directions.

5. CSS `justify-content`

The justify-content property controls how flex items are distributed along the main axis.

It is useful when you want to align items at the start, at the end, in the center, or with space between them.

Common values include:

flex-start
flex-end
center
space-between
space-around
space-evenly

Let’s explore them one by one.

5.1 `justify-content: flex-start`

This aligns items at the main-start side of the container.

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

In a typical left-to-right row, items begin at the left.

[1] [2] [3]

This is the default alignment behavior.

5.2 `justify-content: flex-end`

This aligns items at the main-end side.

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

In a typical left-to-right row:

[1] [2] [3]

Use this when items need to be grouped at the end of a row.

5.3 `justify-content: center`

This centers the group of flex items along the main axis.

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

Visual idea:

[1] [2] [3]

This is useful for centered navigation menus, button groups, and horizontal content.

Important: justify-content: center centers the group along the main axis. It does not automatically center items vertically in a row layout.

5.4 `justify-content: space-between`

This places the first item at the main-start edge and the last item at the main-end edge, distributing the remaining free space between the items.

.container {
    display: flex;
    justify-content: space-between;
}

Visual idea:

[1]             [2]             [3]

There is no extra distributed space before the first item or after the last item.

Use case: A header with a logo on one side and navigation elements distributed across the available width.

5.5 `justify-content: space-around`

This distributes space around each item.

.container {
    display: flex;
    justify-content: space-around;
}

Visual idea:

[1]          [2]          [3]

Each item receives equal space on either side. As a result, the space between adjacent items is twice the space at the outer edges, assuming equal conditions.

5.6 `justify-content: space-evenly`

This distributes free space evenly between the items and at both ends.

.container {
    display: flex;
    justify-content: space-evenly;
}

Visual idea:

[1]        [2]        [3]

The gaps between items and the gaps at the two ends are equal.

Comparison table

Practical example: Centering a button horizontally

<div class="button-container">
    <button>Get Started</button>
</div>

.button-container {
    display: flex;
    justify-content: center;
    border: 2px solid gray;
    padding: 20px;
}

The button is centered along the main axis because the default flex-direction is row.

6. CSS `align-items`

The align-items property controls the alignment of flex items along the cross axis.

When the flex direction is row, the cross axis is vertical in the usual horizontal writing mode. Therefore, align-items can control how items align vertically within the flex container.

Common values include:

stretch
flex-start
flex-end
center
baseline

6.1 `align-items: stretch`

This is the default value for a flex container.

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

Items stretch across the available cross-axis space when their cross size is automatic and other constraints do not prevent stretching.

For a row container with a definite height, this can make items fill the container’s height.

6.2 `align-items: flex-start`

This aligns items at the cross-start edge.

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

In a typical row layout, items align toward the top of the container.

6.3 `align-items: flex-end`

This aligns items at the cross-end edge.

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

In a typical row layout, items align toward the bottom.

6.4 `align-items: center`

This centers the items along the cross axis.

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

For a row layout, items align vertically in the middle of the container.

Get Pranshi Verma’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

For a column layout, the cross axis is horizontal, so align-items: center centers items horizontally.

6.5 `align-items: baseline`

This aligns items according to their text baselines.

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

This is useful when flex items contain text in different font sizes and you want the text baselines to line up.

Practical example: Vertically aligning different-sized boxes

<div class="container">
    <div class="box small">Small</div>
    <div class="box medium">Medium</div>
    <div class="box large">Large</div>
</div>

.container {
    display: flex;
    align-items: center;
    height: 200px;
    border: 2px solid black;
    gap: 10px;
}
.box {
    background-color: lightblue;
    padding: 10px;
}
.small {
    height: 30px;
}
.medium {
    height: 60px;
}
.large {
    height: 100px;
}

All three boxes are vertically centered relative to the container’s cross axis.

Important difference: `align-items` vs `justify-content`

For the default flex-direction: row, justify-content controls horizontal distribution, and align-items controls vertical alignment.

For flex-direction: column, those directions switch.

7. The Most Useful Flexbox Trick: Center an Element Both Horizontally and Vertically

One of the most common beginner questions is:

How do I place a box exactly in the center of the screen?

Flexbox makes it simple.

HTML

<div class="container">
    <div class="box">I am centered!</div>
</div>

CSS

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.box {
    padding: 30px;
    background-color: lightblue;
    border: 2px solid navy;
}

How does it work?

display: flex activates Flexbox.
justify-content: center centers the box along the main axis.
align-items: center centers the box along the cross axis.
min-height: 100vh gives the container at least the height of the viewport.

Because the default direction is row, the box is centered horizontally and vertically.

Practical uses: Login screens, welcome messages, landing-page content, and empty-state messages.

Note that the centering works relative to the container. To center something within the full visible browser area, the container must span that area.

8. How `flex-direction`, `justify-content`, and `align-items` Work Together

These three properties are most powerful when used together.

Consider this code:

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

What happens?

flex-direction: column arranges items vertically.
The main axis is now vertical.
justify-content: center centers items vertically along the main axis.
align-items: center centers items horizontally along the cross axis.

This is why it is essential to understand the axes instead of memorizing that one property is always horizontal and the other is always vertical.

A simple memory trick

First decide the direction, then align along the axes.

Choose flex-direction.
Use justify-content for the main axis.
Use align-items for the cross axis.

This approach works for all four flex directions.

9. Complete Practical Project: Responsive Flexbox Navigation Bar

Let’s build a simple navigation bar using Flexbox.

The navigation bar will contain:

A website logo
Home
About
Courses
Contact

We will use justify-content to distribute the items and align-items to align them vertically.

Complete HTML and CSS

Save the following code as flexbox-navbar.html and open it in a browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Navigation Bar</title>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .navbar {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;
            background-color: #17365D;
            color: white;
        }
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        .nav-links {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 20px;
        }
        .nav-links a {
            color: white;
            text-decoration: none;
        }
        .nav-links a:hover {
            text-decoration: underline;
        }
        @media (max-width: 600px) {
            .navbar {
                flex-direction: column;
                gap: 15px;
                padding: 20px;
            }
            .nav-links {
                flex-wrap: wrap;
                justify-content: center;
                gap: 12px;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="logo">TechLearn</div>
        <div class="nav-links">
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#courses">Courses</a>
            <a href="#contact">Contact</a>
        </div>
    </nav>
</body>
</html>

What have we learned in this project?

The navbar uses display: flex to arrange its direct children in a row.
justify-content: space-between places the logo and navigation group at opposite ends.
align-items: center aligns both groups along the cross axis.
The navigation links use a second flex container.
gap creates consistent spacing between links.
A media query changes the layout for narrower screens.

This example demonstrates how Flexbox can be used in an actual website instead of only in isolated boxes.

10. Common Flexbox Mistakes Students Should Avoid

Mistake 1: Applying Flexbox to the wrong element

Incorrect:

.box {
    display: flex;
}

This makes .box a flex container for its own direct children. It does not arrange the .box elements next to each other if their parent is still using normal block layout.

Correct:

.container {
    display: flex;
}

Apply display: flex to the parent whose direct children you want to arrange.

Mistake 2: Thinking `justify-content` always means horizontal alignment

Incorrect assumption:

“justify-content: center always centers elements horizontally."

That is only true when the main axis is horizontal, as in the default row direction.

With flex-direction: column, the main axis is vertical.

Mistake 3: Expecting `align-items` to work without a flex container

.container {
    align-items: center;
}

The align-items property is relevant to flex and grid containers, among other layout contexts. If the parent is not a flex or grid container, it will not provide the intended flex alignment.

For Flexbox, start with:

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

Mistake 4: Forgetting the container’s height

Suppose you write:

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

If the container is only as tall as its content, there may be little or no extra vertical space for centering to become visually noticeable.

For vertical centering in a row layout, provide sufficient container height, for example:

.container {
    display: flex;
    align-items: center;
    min-height: 200px;
}

Mistake 5: Confusing `gap` with `justify-content`

gap specifies spacing between flex items.
justify-content distributes items and available free space along the main axis.

You can use both together.

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

Mistake 6: Assuming flex items always fit on one line

Flex containers default to flex-wrap: nowrap, so items generally stay on one line and may shrink if necessary.

If you want items to move onto additional lines, use:

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

This is particularly useful for responsive card layouts.

11. Practice Exercises for Students

Now it’s time to apply what you have learned.

Exercise 1: Horizontal Layout

Create a container with three boxes: HTML, CSS, and JavaScript.

Requirements:

Use display: flex.
Arrange the boxes horizontally.
Add padding and different background colors.

Exercise 2: Center Alignment

Create a box inside a container.

Requirements:

Use justify-content: center.
Use align-items: center.
Give the container a height of at least 300 pixels.

Observe the box’s position.

Exercise 3: Vertical Menu

Create a menu with these links:

Home
About
Services
Contact

Requirements:

Use display: flex.
Set flex-direction: column.
Add spacing between links using gap.

Exercise 4: Compare Spacing

Create three boxes and experiment with these values:

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

Observe how the available space changes.

Exercise 5: Align Different Heights

Create three boxes with different heights.

Requirements:

Give the container a fixed height.
Apply align-items: center.
Change it to flex-start, flex-end, and stretch.
Compare the results.

Exercise 6: Responsive Cards

Create four course cards.

Requirements:

Use display: flex.
Add gap: 15px.
Use flex-wrap: wrap.
Make the cards fit comfortably on both desktop and mobile screens.

Exercise 7: Mini Project

Build a simple student dashboard header with:

A logo
A welcome message
A profile button

Use justify-content and align-items to create a neat layout. Then change the direction for small screens.

12. Quick Revision Questions

Q1. Which property activates Flexbox on a parent element?

A. position: flex
B. display: flex
C. float: flex
D. align: flex

Answer: B. display: flex

Q2. Which property controls the main-axis distribution of flex items?

A. align-items
B. justify-content
C. flex-wrap
D. vertical-align

Answer: B. justify-content

Q3. Which property controls alignment along the cross axis?

A. justify-content
B. flex-direction
C. align-items
D. float

Answer: C. align-items

Q4. What is the default value of flex-direction?

A. column
B. row
C. row-reverse
D. column-reverse

Answer: B. row

Q5. Which combination is commonly used to center an element horizontally and vertically inside a flex container?

A. float: center
B. text-align: center only
C. justify-content: center and align-items: center
D. flex-direction: center

Answer: C.

Q6. If flex-direction changes from row to column, what happens to the main axis?

A. It stays horizontal.
B. It becomes vertical.
C. It disappears.
D. It becomes diagonal.

Answer: B. It becomes vertical.

13. Final Takeaway

CSS Flexbox is one of the most useful tools for modern web development. It makes arranging, aligning, and spacing elements much easier than many older layout techniques.

Remember these four key concepts:

display: flex activates Flexbox on a container.
flex-direction determines how items are arranged.
justify-content distributes items along the main axis.
align-items aligns items along the cross axis.

The most important lesson is to understand the relationship between the main axis and the cross axis. Once you understand that relationship, Flexbox becomes much easier to use.

Start by creating three boxes, change the direction, experiment with the alignment properties, and observe the result in your browser. Then build the navigation bar and responsive card exercises.

Learn the concept, experiment with the code, and build something real. That’s how you master CSS Flexbox!

Introduction to CSS Flexbox: justify-content, align-items, flex-direction with Practical Examples

1. What Is CSS Flexbox?

Basic Flexbox syntax

How does Flexbox work?

2. Understanding the Main Axis and Cross Axis

3. The display: flex Property

Example 1: Without Flexbox

Example 2: With Flexbox

Complete example

4. CSS flex-direction

4.1 flex-direction: row

4.2 flex-direction: row-reverse

4.3 flex-direction: column

4.4 flex-direction: column-reverse

Quick comparison

5. CSS justify-content

5.1 justify-content: flex-start

5.2 justify-content: flex-end

5.3 justify-content: center

5.4 justify-content: space-between

5.5 justify-content: space-around

5.6 justify-content: space-evenly

Comparison table

Practical example: Centering a button horizontally

6. CSS align-items

6.1 align-items: stretch

6.2 align-items: flex-start

6.3 align-items: flex-end

6.4 align-items: center

Get Pranshi Verma’s stories in your inbox

6.5 align-items: baseline

Practical example: Vertically aligning different-sized boxes

Important difference: align-items vs justify-content

7. The Most Useful Flexbox Trick: Center an Element Both Horizontally and Vertically

HTML

CSS

How does it work?

8. How flex-direction, justify-content, and align-items Work Together

A simple memory trick

9. Complete Practical Project: Responsive Flexbox Navigation Bar

Complete HTML and CSS

What have we learned in this project?

10. Common Flexbox Mistakes Students Should Avoid

Mistake 1: Applying Flexbox to the wrong element

Mistake 2: Thinking justify-content always means horizontal alignment

Mistake 3: Expecting align-items to work without a flex container

Mistake 4: Forgetting the container’s height

Mistake 5: Confusing gap with justify-content

Mistake 6: Assuming flex items always fit on one line

11. Practice Exercises for Students

Exercise 1: Horizontal Layout

Exercise 2: Center Alignment

Exercise 3: Vertical Menu

Exercise 4: Compare Spacing

Exercise 5: Align Different Heights

Exercise 6: Responsive Cards

Exercise 7: Mini Project

12. Quick Revision Questions

13. Final Takeaway

Written by Pranshi Verma

No responses yet

More from Pranshi Verma

Git & GitHub with VS Code: A Complete Beginner's Guide to Push Your First HTML Project

If you are a beginner and have heard terms like Git, GitHub, Repository, Commit, Push, Branch, Main, Master, and VS Code, you may be…

Routing & Component Structure in React: React Router DOM, Layouts & Reusable Components Explained

So far, your React apps have probably lived on a single page. But real apps have a Home page, an About page, a Dashboard… How do you move…

Exp: 1 Building a Fully Responsive Web Page with Bootstrap Grid System — A Complete Beginner’s…

From zero to responsive — everything you need to understand Bootstrap’s layout engine

Introduction to CSS: A Complete Beginner’s Guide to Cascading Style Sheets

Learn what CSS is, why websites need it, how HTML, CSS, and JavaScript work together, and how to write your first CSS code.

Recommended from Medium

Why Some People Get More Done in 3 Hours Than Others Do in 8

The difference is not always discipline. Sometimes it is what happens to your attention between tasks.

Ants Solved Traffic Jams Before We Built Our First Highway

Millions of drivers still sit in gridlock every day. Tiny insects with no traffic lights, no maps and no leader figured it out long ago.

Future Technology: 6 Innovations by 2030

Explore six future technologies that could transform healthcare, energy, education, robotics, and everyday life by 2030.

I Built the Same API in Rust, Go, and Node.js. Which One Should You Actually Use?

Rust, Go, and Node.js can all power production APIs. But the best choice depends on your workload, team, performance requirements, and the…

PTPL 232 · AI and autism: careful with policing those quaint turns of phrase, please

3. The `display: flex` Property

4. CSS `flex-direction`

4.1 `flex-direction: row`

4.2 `flex-direction: row-reverse`

4.3 `flex-direction: column`

4.4 `flex-direction: column-reverse`

5. CSS `justify-content`

5.1 `justify-content: flex-start`

5.2 `justify-content: flex-end`

5.3 `justify-content: center`

5.4 `justify-content: space-between`

5.5 `justify-content: space-around`

5.6 `justify-content: space-evenly`

6. CSS `align-items`

6.1 `align-items: stretch`

6.2 `align-items: flex-start`

6.3 `align-items: flex-end`

6.4 `align-items: center`

6.5 `align-items: baseline`

Important difference: `align-items` vs `justify-content`

8. How `flex-direction`, `justify-content`, and `align-items` Work Together

Mistake 2: Thinking `justify-content` always means horizontal alignment

Mistake 3: Expecting `align-items` to work without a flex container

Mistake 5: Confusing `gap` with `justify-content`