CSS Flex Container
In this page:
selector {
display: flex;
flex-direction: row | column;
flex-wrap: nowrap | wrap;
justify-content: flex-start | center | space-between;
align-items: stretch | center;
}flex-direction
flex-direction property main axis set करती है: row (default, left से right), row-reverse, column (top से bottom), या column-reverse।
इसे बदलना सिर्फ visual order reverse नहीं करता — यह swap कर देता है कि justify-content और align-items किस axis पर operate करते हैं, क्योंकि "main axis" हमेशा flex-direction को follow करती है।
- Accepted values:
- flex-direction: row | row-reverse | column | column-reverse — main axis direction, row default है
- flex-wrap: nowrap | wrap | wrap-reverse
- justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
- align-items: stretch | flex-start | flex-end | center | baseline
- display: flex | inline-flex
- gap: <length> — items के बीच space
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: flex-direction
<style>
.container {
display: flex;
flex-direction: column;
background: #eef;
padding: 10px;
gap: 8px;
}
.container div {
background: dodgerblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>Top</div>
<div>Bottom</div>
</div>flex-wrap
Default रूप से flex items एक single line पर रहते हैं और fit होने के लिए shrink होते हैं (nowrap)। flex-wrap: wrap set करना items को fit न होने पर additional lines में flow होने देता है, जो responsive card grids के लिए ज़रूरी है; wrap-reverse वही करता है लेकिन नई lines को नीचे के बजाय ऊपर stack करता है।
- Accepted values:
- nowrap — default, सभी items एक line पर
- wrap — items extra lines में wrap होते हैं
- wrap-reverse — wrap करता है, lines reverse में stacked
- नोट: flex container पर लागू होता है
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: flex-wrap
<style>
.container {
display: flex;
flex-wrap: wrap;
background: #eef;
padding: 10px;
gap: 8px;
}
.item {
width: 150px;
background: coral;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>flex-flow Shorthand
flex-flow property flex-direction और flex-wrap को एक declaration में combine करती है, जैसे flex-flow: row wrap। यह purely एक convenience shorthand है — दोनों longhand properties को अलग-अलग इस्तेमाल करना identical results देता है, इसलिए जो भी आपकी stylesheet में साफ़ पढ़ा जाए वह चुनें।
- Accepted values:
- flex-flow: <direction> <wrap> — shorthand order
- flex-flow: row nowrap — default
- flex-flow: column wrap — vertical wrapping
- flex-flow: row-reverse wrap-reverse — दोनों reversed
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: flex-flow shorthand
<style>
.container {
display: flex;
flex-flow: row wrap;
background: #eef;
padding: 10px;
gap: 8px;
}
.container div {
background: coral;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>A</div>
<div>B</div>
</div>justify-content और align-items
justify-content main axis के साथ extra space distribute करता है (flex-start, center, space-between, space-around, space-evenly), जबकि align-items cross axis के साथ items को align करता है (default रूप से stretch, plus flex-start, center, flex-end, baseline)।
ये दोनों properties साथ में ज़्यादातर real-world centering और spacing problems को solve करती हैं।
- Accepted values:
- justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly — main axis
- align-items: stretch | flex-start | flex-end | center | baseline — cross axis
- justify-content default — flex-start
- align-items default — stretch
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: justify-content and align-items
<style>
.container {
display: flex;
height: 150px;
justify-content: center;
align-items: center;
background: #eef;
}
.container div {
background: dodgerblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>Centered both ways</div>
</div>Multi-Line Wrapping के लिए align-content
align-content का कोई visible effect सिर्फ तभी होता है जब कोई flex container कई lines में wrap हो चुका हो (flex-wrap: wrap के ज़रिए) और उसके पास बची हुई cross-axis space हो — यह control करता है कि वे lines कैसे distribute होती हैं, यह नहीं कि एक single line के अंदर items कैसे align होते हैं (वह align-items का काम है)।
यह ठीक इसी वजह से एक commonly confused property है क्योंकि यह किसी single-line flex row पर कुछ नहीं करती।
- Accepted values:
- normal | stretch — default, lines container भरने के लिए stretch होती हैं
- flex-start | flex-end | center — lines को packs करता है
- space-between | space-around | space-evenly — lines को distribute करता है
- नोट: सिर्फ multi-line (wrapped) containers को असर करता है
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: align-content for Multi-Line Wrapping
<style>
.container {
display: flex;
flex-wrap: wrap;
height: 200px;
align-content: space-between;
background: #eef;
}
.item {
width: 150px;
background: coral;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>justify-contentकी ज़रूरत होने परalign-itemsइस्तेमाल करना, क्योंकि वे अलग axes पर काम करते हैं।- यह भूल जाना कि
flex-direction: columnmain axis swap कर देता है, इसलिए दोनों properties roles swap कर लेती हैं। - यह उम्मीद करना कि
align-contentकिसी single-line container पर काम करेगा, जबकि इसेflex-wrap: wrapऔर कई lines चाहिए।
Unprefixed Flexbox Chrome 29+, Firefox 28+, Safari 9+ और Edge 12+ में supported है।
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: