Demon Tech Roadmap

CSS

CSS Flexbox

CSS Flexbox builds flexible one-dimensional layouts easily.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

CSS Flexbox organizes elements in a single row or column. It automatically handles spacing, alignment, and responsiveness without relying on float hacks. Developers define a flex container, and the browser positions the child items perfectly.

Syntax

1/* flexbox syntax */
2.container {
3  display: flex;
4  justify-content: center;
5}

Example

1/* this creates a flex row */
2.row {
3  display: flex;
4  align-items: center;
5  gap: 10px;
6}

Key Points

The `display: flex` property activates the layout mode.
The `flex-direction` determines row or column flow.
The `justify-content` aligns items along the main axis.
The `align-items` aligns items along the cross axis.

Up Next

Continue your journey with the next topic.

Go to CSS Grid ❯