You are viewing a free preview of this lesson.
Subscribe to unlock all 10 lessons in this course and every other course on LearningBro.
CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that makes it easy to align, distribute, and space elements within a container. Before Flexbox, developers relied on floats, tables, and positioning hacks to create layouts. Flexbox replaced all of that with a clean, intuitive system.
Flexbox works on two axes:
Main Axis (default: horizontal) →
┌──────────────────────────────────────────┐
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ ↑
│ │ Item │ │ Item │ │ Item │ │ Item │ │ │ Cross Axis
│ │ 1 │ │ 2 │ │ 3 │ │ 4 │ │ │ (default: vertical)
│ └──────┘ └──────┘ └──────┘ └──────┘ │ ↓
└──────────────────────────────────────────┘
Apply display: flex to a container element. Its direct children become flex items:
.container {
display: flex;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
By default, flex items sit side by side on a single line.
Subscribe to continue reading
Get full access to this lesson and all 10 lessons in this course.