🧭 CSS Flexbox
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
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
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
