CSS Flex Items

order

order property HTML को छुए बिना किसी item की visual position बदल देती है — items default रूप से order: 0 पर होते हैं और ascending sort होते हैं, इसलिए एक कम number किसी item को पहले move करता है और एक ज़्यादा number इसे बाद में move करता है, यहाँ तक कि ties भी source order से break होते हैं।

यह सिर्फ paint order को असर करता है, accessibility के लिए tab/reading order को नहीं, इसलिए इसे purely visual rearrangement के लिए कम मात्रा में इस्तेमाल करें।

उदाहरण: order

<style>
.container {
  display: flex;
  background: #eef;
  padding: 10px;
  gap: 8px;
}
.first {
  order: 2;
  background: coral;
  color: white;
  padding: 10px;
}
.second {
  order: 1;
  background: dodgerblue;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div class="first">Coded first, shown second</div>
  <div class="second">Coded second, shown first</div>
</div>

flex-grow

flex-grow तय करता है कि कोई item container की बची हुई space का कितना हिस्सा अपने siblings के relative claim करता है — किसी एक item पर flex-grow: 2 एक sibling के 1 set होने से दुगनी extra space claim करता है, जबकि default 0 का मतलब है कोई item कभी अपने content size से आगे नहीं बढ़ता।

यह सिर्फ तभी लागू होता है जब distribute करने के लिए बची हुई space हो।

उदाहरण: flex-grow

<style>
.container {
  display: flex;
  background: #eef;
  padding: 10px;
  gap: 8px;
}
.a {
  flex-grow: 2;
  background: coral;
  color: white;
  padding: 10px;
}
.b {
  flex-grow: 1;
  background: dodgerblue;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div class="a">Grows 2x</div>
  <div class="b">Grows 1x</div>
</div>

flex-shrink

flex-shrink flex-grow का mirror है: यह control करता है कि कोई item कितना shrink होता है जब container सबको उनके natural size पर fit करने के लिए बहुत छोटा हो।

Default 1 है (सभी items proportionally shrink होते हैं); किसी item पर flex-shrink: 0 set करना इसे उसके flex-basis size पर pin कर देता है और इसके siblings को overflow absorb करने पर मजबूर करता है।

उदाहरण: flex-shrink

<style>
.container {
  display: flex;
  width: 200px;
  background: #eef;
  padding: 10px;
  gap: 8px;
}
.pinned {
  flex-shrink: 0;
  width: 150px;
  background: coral;
  color: white;
  padding: 10px;
}
.shrinks {
  width: 150px;
  background: dodgerblue;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div class="pinned">Pinned size</div>
  <div class="shrinks">Shrinks to fit</div>
</div>

flex-basis और flex Shorthand

flex-basis grow/shrink calculations होने से पहले किसी item का starting size set करता है।

इसे एक ज़्यादा flexible width की तरह सोचें। तीनों values लगभग हमेशा flex shorthand (flex: grow shrink basis) के रूप में एक साथ लिखी जाती हैं, और common shortcut flex: 1 expand होकर flex: 1 1 0% बन जाता है, जिसका मतलब है "zero starting point से freely grow और shrink करो।"

उदाहरण: flex-basis and the flex shorthand

<style>
.container {
  display: flex;
  background: #eef;
  padding: 10px;
  gap: 8px;
}
.item {
  flex: 1;
  background: dodgerblue;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div class="item">flex: 1 grows and shrinks from a 0% basis</div>
  <div class="item">Equal item</div>
</div>

align-self

align-self एक specific item के लिए container की align-items value को override करता है, वही values accept करते हुए (center, flex-start, flex-end, stretch, baseline)। यह वह इकलौता item-level property है जो main-axis sizing के बजाय cross-axis alignment में वापस पहुँचती है, उपयोगी जब एक single item — जैसे एक "Skip" link — को अपने siblings से अलग vertical alignment चाहिए।

उदाहरण: align-self

<style>
.container {
  display: flex;
  align-items: flex-start;
  height: 150px;
  background: #eef;
}
.container div {
  background: dodgerblue;
  color: white;
  padding: 10px;
}
.skip {
  align-self: flex-end;
  background: coral;
}
</style>
<div class="container">
  <div>Normal</div>
  <div class="skip">Skip link, aligned differently</div>
</div>