🧭 CSS Flexbox (Full Guide)

Last Updated: November 2025

The Flexbox (Flexible Box Layout) is a modern CSS layout system that helps you align and distribute space among elements efficiently, even when their size is unknown or dynamic.

🗣 Hinglish Tip: Flexbox se layout banana easy hota hai — bina float ya position ke, responsive design simple ho jaata hai.

To use Flexbox, set the parent container’s display to flex.

.container {
  display: flex;
}

All direct child elements become flex items.

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

🧩 Flex Container Properties

Property	Description	Example
display	Activates flex layout	display: flex;
flex-direction	Defines main axis direction (row or column)	flex-direction: row \| column \| row-reverse \| column-reverse;
flex-wrap	Controls wrapping of items	flex-wrap: nowrap \| wrap \| wrap-reverse;
flex-flow	Shorthand for flex-direction + flex-wrap	flex-flow: row wrap;
justify-content	Aligns items along main axis	justify-content: center \| space-between \| flex-end;
align-items	Aligns items along cross axis	align-items: center \| flex-start \| stretch;
align-content	Aligns rows when wrapping	align-content: space-around \| center \| stretch;

Example: Container Control

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 200px;
  background-color: #f0f0f0;
}
.item {
  background-color: lightcoral;
  padding: 20px;
  font-size: 20px;
}

🎯 Flex Item Properties

Property	Description	Example
order	Controls the order of flex items	order: 2;
flex-grow	Defines how much a flex item will grow relative to others	flex-grow: 1;
flex-shrink	Defines how much a flex item will shrink relative to others	flex-shrink: 0;
flex-basis	Defines the initial main size of a flex item	flex-basis: 200px;
flex	Shorthand for grow, shrink, and basis	flex: 1 0 150px;
align-self	Overrides align-items for an individual item	align-self: flex-end;

Example: Item Control

.container {
  display: flex;
  height: 200px;
  background-color: #eee;
}
.item {
  flex: 1;
  padding: 20px;
  background-color: lightblue;
  margin: 5px;
}
.item:nth-child(2) {
  flex-grow: 2;
  background-color: lightgreen;
  align-self: flex-end;
}
.item:nth-child(3) {
  order: -1;
  background-color: lightcoral;
}

💡 Flexbox Shorthand Summary

Shorthand	Expands To	Example
flex-flow	flex-direction + flex-wrap	flex-flow: row wrap;
flex	flex-grow + flex-shrink + flex-basis	flex: 1 1 auto;

← Previous Next →