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

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

सिंटैक्स

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

वैल्यूज

डिफॉल्ट वैल्यू: auto।

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

इस उदाहरण में सभी ब्लॉक्स को flex-start वैल्यू सेट है (align-items प्रॉपर्टी), और तीसरे ब्लॉक को - align-self वैल्यू stretch में सेट है:

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

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

Результат:

उदाहरण . flex-end वैल्यू

इस उदाहरण में सभी ब्लॉक्स के लिए align-items प्रॉपर्टी की वैल्यू flex-start सेट है, और तीसरे ब्लॉक के लिए - align-self वैल्यू flex-end में सेट है:

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

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

Результат:

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

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

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  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 {
  align-self: start;
}

Результат:

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

आइए पहले एलिमेंट के लिए वर्टिकल एक्सिस के सेंटर के साथ अलाइनमेंट सेट करते हैं:

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

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  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 {
  align-self: center;
}

Результат:

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

आइए ग्रिड में हमारे पहले एलिमेंट के लिए वर्टिकल एक्सिस के अंत के साथ अलाइनमेंट सेट करते हैं:

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

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  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 {
  align-self: end;
}

Результат:

यह भी देखें