CSS Flexbox
किसी dining hall में chairs arrange करने की कल्पना करें। अगर आप उन्हें हाथ से रखते हैं, तो आपको यह सुनिश्चित करने के लिए हर chair के बीच की distance measure करनी पड़ती है कि वे aligned हैं। यह धीमा और tedious है।
CSS Flexbox एक professional events coordinator hire करने जैसा है। किसी parent container को Flex designate करके, browser natively अपने आप उसके child elements की spacing, alignment, और distribution संभाल लेता है।
यह items को साथ-साथ align करने, उन्हें evenly space करने, या उन्हें दोनों axes पर perfectly center करने का सबसे आसान, सबसे reliable तरीका है।
In this page:
Syntax
selector {
display: flex;
flex-direction: row | column;
justify-content: value;
align-items: value;
}Flex Container Set करना
Flexbox enable करने के लिए, आप अपने parent container पर display: flex property लागू करते हैं। यह एक 'Flex Container' establish करता है और इसके सभी direct child elements को 'Flex Items' में बदल देता है, उन्हें default रूप से horizontally साथ-साथ align करते हुए।
Note:
- जब आप चाहते हैं कि आपका flex container दूसरे text elements के साथ inline बैठे तो display: inline-flex property इस्तेमाल करें।
- Accepted values:
- display: flex — block-level flex container
- display: inline-flex — inline-level flex container
- flex-direction — main axis set करता है
- flex-wrap — wrapping control करता है
- flex-flow — दोनों का shorthand
Warning:
Flexbox properties को अपने child elements की alignment control करने के लिए parent container पर लागू किया जाना चाहिए।
उदाहरण: Setting the Flex Container
<style>
.container {
display: flex;
background: #eef;
padding: 10px;
}
.container div {
background: dodgerblue;
color: white;
padding: 10px;
margin: 4px;
}
</style>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
</div>Main Axis पर Align करना (justify-content)
justify-content property control करती है कि flex items main axis के साथ (default रूप से horizontally) कैसे align होते हैं, flex-start, flex-end, center, space-between, और space-around options offer करते हुए।
Note:
- अपने brand logo और menu links को अपने header के opposite ends पर धकेलने के लिए justify-content: space-between इस्तेमाल करें।
- Accepted values:
- flex-start — items को शुरुआत में packs करता है (normal ऐसे ही behave करता है)
- flex-end — items को अंत में packs करता है
- center — items को center करता है
- space-between — items के बीच even space
- space-around — items के आस-पास even space
- space-evenly — बीच में और आस-पास बराबर space
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
एक main axis path define करने में fail होना elements को default रूप से flex-start पर जाने और left पर stack होने का कारण बन सकता है।
उदाहरण: Aligning on the Main Axis (justify-content)
<style>
.container {
display: flex;
justify-content: space-between;
background: #eef;
padding: 10px;
}
.container div {
background: coral;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>Left</div>
<div>Right</div>
</div>Cross Axis पर Align करना (align-items)
align-items property control करती है कि flex items cross axis के साथ (default रूप से vertically) कैसे align होते हैं, flex-start, flex-end, center, stretch (default), और baseline options offer करते हुए।
Note:
- text links और icon images की vertical heights को साफ़ तरीके से साथ-साथ align करने के लिए align-items: center इस्तेमाल करें।
- Accepted values:
- normal — initial value, flex containers में stretch जैसा behave करता है
- stretch — cross axis भरता है (default behavior)
- flex-start — cross start पर align करता है
- flex-end — cross end पर align करता है
- center — cross axis पर center करता है
- baseline — text baselines align करता है
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
Baseline alignment अलग-अलग font sizes वाले text blocks को थोड़ा offset align करा सकता है।
उदाहरण: Aligning on the Cross Axis (align-items)
<style>
.container {
display: flex;
height: 150px;
align-items: center;
background: #eef;
}
.container div {
background: dodgerblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>Centered item</div>
</div>Wrapping और Spacing (flex-wrap और gap)
Default रूप से, flex items एक single line में fit होने की कोशिश करेंगे, अगर वे fit न हों तो shrink होते हुए या container से overflow होते हुए। flex-wrap: wrap property items को छोटे screens पर नई lines में wrap होने देती है, और gap property उनके बीच एक consistent spacing define करती है।
Note:
- complex margin calculations की ज़रूरत के बिना अपने flex items के बीच आसानी से consistent spacing जोड़ने के लिए gap property इस्तेमाल करें।
- Accepted values:
- flex-wrap: nowrap — default, single line
- flex-wrap: wrap — extra lines में wrap होता है
- flex-wrap: wrap-reverse — reverse order में wrap होता है
- gap: <length> | <percentage> | normal — items के बीच spacing (flex में normal 0 है)
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
flex-wrap: wrap लागू करने में fail होना mobile screens पर horizontal layout overflow पैदा कर सकता है।
उदाहरण: Wrapping and Spacing (flex-wrap & gap)
<style>
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
background: #eef;
padding: 10px;
}
.container div {
background: coral;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>Flex Items को Size करना (grow, shrink, basis)
आप control कर सकते हैं कि individual flex items खाली जगह भरने के लिए कैसे shrink या grow करते हैं: flex-grow (कितना grow करना है), flex-shrink (कितना shrink करना है), और flex-basis (item की default starting size)।
Note:
- child elements को available space भरने के लिए बराबर grow और shrink कराने के लिए shorthand flex: 1; इस्तेमाल करें।
- Accepted values:
- flex-grow: <number> — कितना free space लेना है, default 0
- flex-shrink: <number> — shrinkage का share, default 1
- flex-basis: <length> | auto | content — starting size
- flex: 1 — 1 1 0% का shorthand
- flex: none — 0 0 auto
- flex: auto — 1 1 auto
- flex: 0 1 auto — initial value
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
अगर आप कुछ elements पर flex-grow set करते हैं लेकिन दूसरों पर नहीं, तो styled elements सारा खाली space भरने के लिए expand होंगे, बाकियों को किनारे धकेलते हुए।
उदाहरण: Sizing Flex Items (grow, shrink, basis)
<style>
.container {
display: flex;
background: #eef;
padding: 10px;
gap: 8px;
}
.a {
flex-grow: 1;
background: dodgerblue;
color: white;
padding: 10px;
}
.b {
flex-shrink: 1;
background: coral;
color: white;
padding: 10px;
}
.c {
flex-basis: 100px;
background: mediumseagreen;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- parent container के बजाय child elements पर flexbox alignment properties लागू करना।
- multi-column layouts पर flex-wrap: wrap शामिल करना भूल जाना, mobile screens पर horizontal overflow पैदा करते हुए।
- flex items पर hard-coded, non-flexible pixel widths set करना, जो उन्हें proportionally scale होने से रोकता है।
चैप्टर सारांश
- अपने parent container पर display: flex लागू करके Flexbox enable करें।
- justify-content इस्तेमाल करके horizontal alignment, align-items इस्तेमाल करके vertical alignment, और gap इस्तेमाल करके item spacing control करें।
- छोटे screens पर items को flex-wrap: wrap इस्तेमाल करके नई lines में wrap होने दें, और grow, shrink, और basis shorthands इस्तेमाल करके item sizing control करें।
ब्राउज़र सपोर्ट
Standard CSS Flexbox display और alignment properties हर modern web browser द्वारा natively supported हैं।
🔒
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: