Introduction

Introduction

Welcome to the CSS Flexbox Tutorial! Flexbox (Flexible Box Layout) is a CSS layout system designed to distribute space and align items in a container — even when their sizes are unknown or dynamic.

The Problem Before Flexbox

Before Flexbox, developers relied on floats, inline-block, and table display hacks to create layouts. These techniques were:

• ❌ Fragile and unintuitive
• ❌ Required clearfix hacks
• ❌ Difficult to vertically center elements
• ❌ Couldn't easily reorder elements
• ❌ Couldn't distribute remaining space proportionally

What Flexbox Solves

Problem	Old Solution	Flexbox Solution
Horizontal layout	float: left + clearfix	display: flex
Vertical centering	position: absolute + transform	align-items: center
Equal-height columns	JavaScript or table hacks	Automatic with Flexbox
Space distribution	Manual percentage widths	flex-grow, justify-content
Reordering elements	Change the HTML	order property

Flexbox in One Line

.container {
    display: flex;
}

/* That's it! All direct children become flex items 
   that sit side by side in a row. */

Key Flexbox Concepts

1. Flex Container — the parent element with display: flex
2. Flex Items — the direct children of the flex container
3. Main Axis — the primary direction items flow (default: horizontal →)
4. Cross Axis — the perpendicular direction (default: vertical ↓)

What You'll Learn

1. Flex Containers — setting up and configuring flex parents
2. Flex Grow — how items expand to fill space
3. Flex Shrink — how items contract when space is tight
4. Flex Wrap — wrapping items to the next line
5. Flex Basis — setting the ideal size of items
6. Building menus — practical navigation with Flexbox
7. Nested Flexbox menus — dropdown sub-menus
8. Axis alignment — main axis and cross axis alignment
9. Cross axis alignment — align-items and align-self
10. Grid vs stacked layout — switching layouts responsively
11. Element order — visual reordering without changing HTML

Browser Support

Flexbox is fully supported in all modern browsers — Chrome, Firefox, Safari, Edge, and mobile browsers. It's been stable since 2015 and is completely safe for production use.

Key Takeaways

• Flexbox is a one-dimensional layout system (row or column at a time)
• It replaces float-based layouts with a simpler, more powerful model
• Just display: flex on a parent makes children flex items in a row
• Two axes: main axis (flow direction) and cross axis (perpendicular)
• You'll learn both the theory and practical projects