CSS Flexbox Intro

Flexbox किस समस्या को Solve करता है

Flexbox से पहले, elements को साथ-साथ layout करने या किसी चीज़ को vertically center करने के लिए float hacks, negative margins, या table-based tricks चाहिए होते थे जो fragile और reason करने में मुश्किल थे।

Flexbox को खासतौर पर एक one-dimensional layout model — एक single row या एक single column — के लिए बनाया गया था, और यह उन पुराने hacks को मुट्ठी भर declarative properties में collapse कर देता है। अगर आपने कभी किसी चीज़ को center करने के लिए vertical-align से जूझा है, तो Flexbox वह fix है।

उदाहरण: What Problem Flexbox Solves

<style>
.old-center {
  vertical-align: middle;
  background: lightgray;
  height: 60px;
  padding: 10px;
  margin-bottom: 10px;
}
.flex-center {
  display: flex;
  align-items: center;
  height: 60px;
  background: #eef;
}
.flex-center p {
  background: dodgerblue;
  color: white;
  padding: 8px;
  margin: 0;
}
</style>
<div class="old-center">vertical-align alone does not center a block</div>
<div class="flex-center">
  <p>Centered without vertical-align hacks</p>
</div>

Flex Container

एक flex container कोई भी element है जिस पर display: flex (या inline-flex) लागू है। जिस पल आप इसे set करते हैं, उस element का हर direct child automatically एक flex item बन जाता है — इसके होने के लिए आपको children में कोई class या property जोड़ने की ज़रूरत नहीं।

Container को एक main axis और एक cross axis भी मिलती है, जिन्हें हर दूसरी Flexbox property reference करती है।

उदाहरण: The Flex Container

<style>
.container {
  display: flex;
  background: #eef;
  padding: 10px;
  gap: 8px;
}
.container div {
  background: dodgerblue;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div>Auto flex item</div>
  <div>Auto flex item</div>
</div>

Flex Item Relationship

Flex items default रूप से container के main axis के साथ layout होते हैं, left से right, हर एक सिर्फ अपने content की ज़रूरत के अनुसार जगह लेता है जब तक अन्यथा न कहा जाए। क्योंकि parent-child relationship ही "flex item" status define करता है, nested flex containers common हैं: एक flex item खुद अपने children के लिए एक flex container हो सकता है, दोनों axes के बीच किसी conflict के बिना।

उदाहरण: The Flex Item Relationship

<style>
.outer {
  display: flex;
  background: #eef;
  padding: 10px;
}
.inner {
  display: flex;
  background: seagreen;
  padding: 10px;
}
.inner div {
  background: coral;
  color: white;
  padding: 8px;
}
</style>
<div class="outer">
  <div class="inner">
    <div>Nested flex item</div>
  </div>
</div>

Default Direction और Wrapping Behavior

Out of the box, एक flex container items को एक single row में horizontally layout करता है और नई line पर wrap होने के बजाय उन्हें fit होने के लिए shrink कर देगा — यह default पहली बार card grid बना रहे कई लोगों को हैरान करता है।

flex-direction या flex-wrap (दोनों Flex Container topic में covered) की तरफ़ जाने से पहले इस default को समझना ज़रूरी है, क्योंकि default को गलत पढ़ना सबसे common पहला Flexbox bug है।

उदाहरण: Default Direction and Wrapping Behavior

<style>
.container {
  display: flex;
  background: #eef;
  padding: 10px;
  gap: 8px;
}
.container div {
  background: dodgerblue;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flexbox का इस्तेमाल कब करें

Flexbox one-dimensional problems के लिए बेहतरीन है — एक navbar, एक button group, एक form row, एक अकेले element को center करना — जहाँ आप items को एक line के साथ arrange कर रहे हैं। genuinely two-dimensional layouts (rows AND columns जिन्हें साथ में align होना चाहिए) के लिए, CSS Grid, जो अपने dedicated chapter में covered है, आमतौर पर बेहतर tool है; दोनों complementary हैं, competitors नहीं।

उदाहरण: When To Reach for Flexbox

<style>
.navbar {
  display: flex;
  gap: 10px;
  background: #333;
  padding: 10px;
}
.navbar a {
  color: white;
}
</style>
<nav class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>