सीएसएस फ्लेक्स आइटम
बाल तत्व (आइटम)
फ्लेक्स कंटेनर के प्रत्यक्ष बाल तत्व स्वचालित रूप से लचीले (फ्लेक्स) आइटम बन जाते हैं।
1
2
3
4
उपरोक्त तत्व ग्रे फ्लेक्स कंटेनर के अंदर चार नीले फ्लेक्स आइटम का प्रतिनिधित्व करता है।
उदाहरण
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
फ्लेक्स आइटम गुण हैं:
आदेश संपत्ति
orderगुण फ्लेक्स आइटम के क्रम को निर्दिष्ट करता है ।
1
2
3
4
कोड में पहले फ्लेक्स आइटम को लेआउट में पहले आइटम के रूप में प्रकट होने की आवश्यकता नहीं है।
आदेश मान एक संख्या होना चाहिए, डिफ़ॉल्ट मान 0 है।
उदाहरण
ऑर्डर प्रॉपर्टी फ्लेक्स आइटम्स के ऑर्डर को बदल सकती है :
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
फ्लेक्स-ग्रो प्रॉपर्टी
संपत्ति निर्दिष्ट करती है कि flex-growफ्लेक्स आइटम शेष फ्लेक्स आइटमों के सापेक्ष कितना बढ़ेगा।
1
2
3
मान एक संख्या होना चाहिए, डिफ़ॉल्ट मान 0 है।
उदाहरण
तीसरे फ्लेक्स आइटम को अन्य फ्लेक्स आइटम की तुलना में आठ गुना तेजी से बढ़ने दें:
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow:
8">3</div>
</div>
फ्लेक्स-सिकुड़ संपत्ति
संपत्ति निर्दिष्ट करती है कि flex-shrinkफ्लेक्स आइटम शेष फ्लेक्स आइटमों के सापेक्ष कितना छोटा हो जाएगा।
1
2
3
4
5
6
7
8
9
10
मान एक संख्या होना चाहिए, डिफ़ॉल्ट मान 1 है।
उदाहरण
तीसरे फ्लेक्स आइटम को अन्य फ्लेक्स आइटम जितना छोटा न होने दें:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink:
0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
फ्लेक्स-आधार संपत्ति
संपत्ति फ्लेक्स आइटम की flex-basisप्रारंभिक लंबाई निर्दिष्ट करती है।
1
2
3
4
उदाहरण
तीसरे फ्लेक्स आइटम की प्रारंभिक लंबाई 200 पिक्सेल पर सेट करें:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
फ्लेक्स संपत्ति
संपत्ति , , और संपत्तियों के flexलिए एक आशुलिपि संपत्ति है ।
flex-growflex-shrinkflex-basis
उदाहरण
तीसरे फ्लेक्स आइटम को बढ़ने योग्य (0) नहीं, सिकुड़ने योग्य नहीं (0) बनाएं, और 200 पिक्सेल की प्रारंभिक लंबाई के साथ:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex:
0 0 200px">3</div>
<div>4</div>
</div>
संरेखण-स्वयं संपत्ति
गुण लचीले कंटेनर के align-selfअंदर चयनित आइटम के लिए संरेखण निर्दिष्ट करता है।
संपत्ति कंटेनर की संपत्ति align-self द्वारा निर्धारित डिफ़ॉल्ट संरेखण को ओवरराइड करती है align-items।
1
2
3
4
इन उदाहरणों में हम संपत्ति को बेहतर ढंग से प्रदर्शित करने के लिए 200 पिक्सेल ऊंचे कंटेनर का उपयोग करते
align-selfहैं:
उदाहरण
तीसरे फ्लेक्स आइटम को कंटेनर के बीच में संरेखित करें:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self:
center">3</div>
<div>4</div>
</div>
उदाहरण
कंटेनर के शीर्ष पर दूसरा फ्लेक्स आइटम और कंटेनर के नीचे तीसरा फ्लेक्स आइटम संरेखित करें:
<div class="flex-container">
<div>1</div>
<div style="align-self:
flex-start">2</div>
<div style="align-self:
flex-end">3</div>
<div>4</div>
</div>
सीएसएस फ्लेक्सबॉक्स आइटम गुण
निम्न तालिका सभी सीएसएस फ्लेक्सबॉक्स आइटम गुणों को सूचीबद्ध करती है:
| Property | Description |
|---|---|
| align-self | Specifies the alignment for a flex item (overrides the flex container's align-items property) |
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
| flex-basis | Specifies the initial length of a flex item |
| flex-grow | Specifies how much a flex item will grow relative to the rest of the flex items inside the same container |
| flex-shrink | Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container |
| order | Specifies the order of the flex items inside the same container |