align-items प्रॉपर्टी

align-items प्रॉपर्टी फ्लेक्स ब्लॉक्स के लिए क्रॉस एक्सिस के साथ और ग्रिड्स के लिए वर्टिकल एक्सिस के साथ एलिमेंट्स के अलाइनमेंट को सेट करती है। यह पैरेंट एलिमेंट पर एप्लाई होती है।

सिंटैक्स

cssसिलेक्टर {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

वैल्यूज

डिफॉल्ट वैल्यू: stretch.

उदाहरण . stretch वैल्यू

अभी मेन एक्सिस लेफ्ट से राइट की ओर है, और क्रॉस एक्सिस के साथ एलिमेंट्स पूरी ऊंचाई में स्ट्रेच हो गए हैं:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  border: 1px solid #696989;
}

Результат:

उदाहरण . stretch वैल्यू + एलिमेंट के साइज

अभी एलिमेंट्स के लिए चौड़ाई और ऊंचाई सेट है, इसलिए align-items प्रॉपर्टी के लिए stretch वैल्यू को इग्नोर कर दिया जाएगा:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

उदाहरण . flex-start वैल्यू बिना एलिमेंट साइज के

अभी एलिमेंट्स ऊपर की ओर अटैच होंगे:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  border: 1px solid #696989;
}

Результат:

उदाहरण . flex-start वैल्यू + एलिमेंट के साइज

अभी एलिमेंट्स अब भी ऊपर की ओर अटैच होंगे, हालांकि उनकी चौड़ाई और ऊंचाई सेट होगी:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

उदाहरण . flex-end वैल्यू + एलिमेंट के साइज

अभी एलिमेंट्स नीचे की ओर अटैच होंगे:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: flex-end;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

उदाहरण . center वैल्यू + एलिमेंट के साइज

अभी एलिमेंट्स क्रॉस एक्सिस (इस केस में वर्टिकली) के सेंटर में होंगे:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: center;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

उदाहरण . center वैल्यू, अलग-अलग साइज के एलिमेंट

अभी एलिमेंट्स की ऊंचाई अलग-अलग है (अभी वे टेक्स्ट से एक्सपैंड हो रहे हैं, लेकिन height भी सेट किया जा सकता है), सभी की चौड़ाई समान है, क्योंकि width प्रॉपर्टी सेट है:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: center;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  border: 1px solid #696989;
}

Результат:

उदाहरण . baseline वैल्यू, अलग-अलग साइज के एलिमेंट

और इस तरह बेसलाइन अलाइनमेंट दिखता है:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: baseline;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 130px;
  line-height: 1;
  border: 1px solid #696989;
}

Результат:

उदाहरण . ग्रिड में वर्टिकल एक्सिस की शुरुआत के साथ अलाइनमेंट

आइए हमारे एलिमेंट्स को सेल्स के अंदर वर्टिकल एक्सिस की शुरुआत के साथ अलाइन करें:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  align-items: flex-start;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

और अब ब्राउज़र डिबगर में हमारे ग्रिड को देखते हैं:

उदाहरण . ग्रिड में वर्टिकल एक्सिस के सेंटर के साथ अलाइनमेंट

और अब हमारे एलिमेंट्स को सेल्स में वर्टिकल एक्सिस के सेंटर के साथ अलाइन करेंगे:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  align-items: center;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

आइए डिबगर में ग्रिड के डिस्प्ले को देखते हैं:

उदाहरण . ग्रिड में वर्टिकल एक्सिस के अंत के साथ अलाइनमेंट

एलिमेंट्स के अलाइनमेंट को फिर से बदलेंगे, इस बार वर्टिकल एक्सिस के अंत के साथ:

html<div id="parent">
  <div id="elem1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  align-items: end;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  
}

Результат:

और अब देखते हैं कि डिबगर के जरिए हमारा ग्रिड कैसा दिखता है:

यह भी देखें