CSS

📦 CSS Tutorial: Flexbox

📌 Introduction

Flexbox (Flexible Box Layout) is a one-dimensional layout system in CSS designed to help you align, space, and distribute items within a container—either horizontally or vertically. It makes building responsive layouts easier and more intuitive. Flexbox is essential for modern UI design (navbars, cards, buttons, grids, and more). 🚀🔥

🎯 Why Use Flexbox?

Effortless vertical & horizontal centering
Automatic spacing & distribution
Controls direction, alignment, and wrapping
Responsive by default
Replaces complex float-based layouts

✨ Enable Flexbox

Enable Flexbox

.container {
  display: flex;
}

🧩 Flexbox Properties Overview

Flexbox properties are divided into two groups:

🔹 Container Properties (parent)
🔹 Item Properties (children)

📦 Flex Container Properties

1. display: flex / inline-flex

Code Snippet

display: flex;

Code Snippet

display: inline-flex;

2. flex-direction

Controls the direction of children.

row (default)
column
row-reverse
column-reverse

Code Snippet

.container {
  flex-direction: row;
}

3. justify-content

Aligns children horizontally (main axis).

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

Justify Content

.container {
  justify-content: center;
}

4. align-items

Aligns children vertically (cross axis).

stretch (default)
flex-start
center
flex-end
baseline

Align Items

align-items: center;

5. flex-wrap

Allows items to wrap to new lines.

Wrap

flex-wrap: wrap;

6. align-content

Controls spacing of wrapped rows.

Code Snippet

.container {
  flex-wrap: wrap;
  align-content: space-between;
}

🎯 Flex Item Properties

1. flex-grow

How much a flex item expands relative to others.

Code Snippet

flex-grow: 1;

2. flex-shrink

How items shrink when space is limited.

Code Snippet

flex-shrink: 1;

3. flex-basis

Initial size of item (before grow/shrink).

Code Snippet

flex-basis: 200px;

4. flex shorthand

Flex Shorthand

flex: <grow> <shrink> <basis>;

.item {
  flex: 1 1 200px;
}

5. align-self

Overrides align-items for a single child.

Code Snippet

align-self: center;

🔥 Common Flexbox Patterns

1. Center Anything

Center Content

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. Navbar Layout

Navbar

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

3. Responsive Card Grid

Card Grid

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

.grid .card {
  flex: 1 1 calc(33.33% - 20px);
}

4. Sidebar Layout

Sidebar

.layout {
  display: flex;
}

.sidebar {
  flex-basis: 250px;
}

.content {
  flex: 1;
}

5. Equal Height Columns

Equal Height

.columns {
  display: flex;
}

.col {
  background: #eee;
  padding: 20px;
  flex: 1;
}

📊 Quick Flexbox Reference Table

Property	Purpose
flex-direction	Main axis direction
justify-content	Horizontal alignment (main axis)
align-items	Vertical alignment (cross axis)
flex-wrap	Wrap items onto multiple lines
flex-grow	Controls item expansion
flex-basis	Base width of item
align-self	Override item alignment

>>“Flexbox turns painful layout problems into simple, elegant solutions.” 💡✨

🎉 Conclusion

Flexbox is one of the most powerful layout systems in CSS. It helps you align, distribute, and manage space effortlessly across elements—even in responsive designs. Mastering Flexbox will dramatically improve your layout skills and UI development speed. 🚀🔥