सीएसएस फ्लेक्स कंटेनर
मूल तत्व (कंटेनर)
जैसा कि हमने पिछले अध्याय में निर्दिष्ट किया है, यह एक फ्लेक्स कंटेनर (नीला क्षेत्र) है जिसमें तीन फ्लेक्स आइटम हैं :
1
2
3
displayगुण को
सेट करके फ्लेक्स कंटेनर लचीला हो जाता है flex:
उदाहरण
.flex-container {
display: flex;
}
फ्लेक्स कंटेनर गुण हैं:
फ्लेक्स-दिशा संपत्ति
संपत्ति परिभाषित करती है कि flex-directionकंटेनर किस दिशा में फ्लेक्स वस्तुओं को ढेर करना चाहता है।
1
2
3
उदाहरण
मान फ्लेक्स आइटम को columnलंबवत (ऊपर से नीचे तक) स्टैक करता है:
.flex-container {
display: flex;
flex-direction: column;
}
उदाहरण
मान फ्लेक्स आइटम को लंबवत रूप से column-reverseस्टैक करता है (लेकिन नीचे से ऊपर तक):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
उदाहरण
मान फ्लेक्स आइटम को rowक्षैतिज रूप से (बाएं से दाएं) स्टैक करता है:
.flex-container {
display: flex;
flex-direction: row;
}
उदाहरण
मान फ्लेक्स आइटम को क्षैतिज रूप से row-reverseस्टैक करता है (लेकिन दाएं से बाएं):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
फ्लेक्स-रैप संपत्ति
संपत्ति निर्दिष्ट करती है कि flex-wrapफ्लेक्स आइटम को लपेटना चाहिए या नहीं।
संपत्ति को बेहतर ढंग से प्रदर्शित करने के लिए नीचे दिए गए उदाहरणों में 12 फ्लेक्स आइटम
flex-wrapहैं।
1
2
3
4
5
6
7
8
9
10
1 1
12
उदाहरण
मान निर्दिष्ट करता है कि wrapयदि आवश्यक हो तो फ्लेक्स आइटम लपेटे जाएंगे:
.flex-container {
display: flex;
flex-wrap: wrap;
}
उदाहरण
मान निर्दिष्ट करता है कि nowrapफ्लेक्स आइटम लपेटे नहीं जाएंगे (यह डिफ़ॉल्ट है):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
उदाहरण
मान निर्दिष्ट करता है कि wrap-reverseयदि आवश्यक हो तो लचीले आइटम उल्टे क्रम में लपेटे जाएंगे:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
फ्लेक्स-फ्लो संपत्ति
प्रॉपर्टी और
प्रॉपर्टी दोनों को सेट करने के flex-flowलिए एक शॉर्टहैंड प्रॉपर्टी है ।
flex-directionflex-wrap
उदाहरण
.flex-container {
display: flex;
flex-flow: row wrap;
}
औचित्य-सामग्री संपत्ति
justify-contentसंपत्ति का उपयोग फ्लेक्स आइटम को संरेखित करने के लिए किया जाता है :
1
2
3
उदाहरण
मान कंटेनर के centerकेंद्र में फ्लेक्स आइटम को संरेखित करता है:
.flex-container {
display: flex;
justify-content: center;
}
उदाहरण
मान कंटेनर की flex-startशुरुआत में फ्लेक्स आइटम को संरेखित करता है (यह डिफ़ॉल्ट है):
.flex-container {
display: flex;
justify-content: flex-start;
}
उदाहरण
मान कंटेनर के flex-endअंत में फ्लेक्स आइटम को संरेखित करता है:
.flex-container {
display: flex;
justify-content: flex-end;
}
उदाहरण
मान पंक्तियों के space-aroundपहले, बीच और बाद में स्थान के साथ फ्लेक्स आइटम प्रदर्शित करता है:
.flex-container {
display: flex;
justify-content: space-around;
}
उदाहरण
space-betweenमान पंक्तियों के बीच रिक्त स्थान के साथ फ्लेक्स आइटम प्रदर्शित करता है :
.flex-container {
display: flex;
justify-content: space-between;
}
संरेखण-आइटम संपत्ति
align-itemsसंपत्ति का उपयोग फ्लेक्स आइटम को संरेखित करने के लिए किया जाता है ।
1
2
3
इन उदाहरणों में हम संपत्ति को बेहतर ढंग से प्रदर्शित करने के लिए 200 पिक्सेल ऊंचे कंटेनर का उपयोग करते
align-itemsहैं।
उदाहरण
centerमान कंटेनर के बीच में फ्लेक्स आइटम को संरेखित करता है :
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
उदाहरण
मान कंटेनर के flex-startशीर्ष पर फ्लेक्स आइटम को संरेखित करता है:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
उदाहरण
मान कंटेनर के flex-endनिचले भाग में फ्लेक्स आइटम को संरेखित करता है:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
उदाहरण
stretchमान कंटेनर को भरने के लिए फ्लेक्स आइटम को फैलाता है (यह डिफ़ॉल्ट है) :
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
उदाहरण
मान फ्लेक्स आइटम को baselineसंरेखित करता है जैसे कि उनकी बेसलाइन संरेखित करता है:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
नोट: उदाहरण अलग-अलग फ़ॉन्ट-आकार का उपयोग यह प्रदर्शित करने के लिए करता है कि आइटम टेक्स्ट बेसलाइन द्वारा संरेखित हो जाते हैं:
1
2
3
संरेखण-सामग्री संपत्ति
align-contentसंपत्ति का उपयोग फ्लेक्स लाइनों को संरेखित करने के लिए किया जाता है ।
1
2
3
4
5
6
7
8
9
10
1 1
12
इन उदाहरणों में हम संपत्ति को बेहतर ढंग से प्रदर्शित करने के
flex-wrapलिए , पर सेट की गई संपत्ति के साथ 600 पिक्सेल ऊंचे कंटेनर का उपयोग करते हैं।wrapalign-content
उदाहरण
मान उनके बीच समान स्थान वाली space-betweenफ्लेक्स लाइनों को प्रदर्शित करता है:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
उदाहरण
मान फ्लेक्स लाइनों को उनके space-aroundपहले, बीच और बाद में स्थान के साथ प्रदर्शित करता है:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
उदाहरण
stretchमान शेष स्थान लेने के लिए फ्लेक्स लाइनों को फैलाता है (यह डिफ़ॉल्ट है) :
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
उदाहरण
centerमान प्रदर्शित करता है कंटेनर के बीच में फ्लेक्स लाइनों को प्रदर्शित करता है :
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
उदाहरण
मान कंटेनर की flex-startशुरुआत में फ्लेक्स लाइनों को प्रदर्शित करता है:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
उदाहरण
मान कंटेनर के flex-endअंत में फ्लेक्स लाइनों को प्रदर्शित करता है:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
परफेक्ट सेंटरिंग
निम्नलिखित उदाहरण में हम एक बहुत ही सामान्य शैली की समस्या को हल करेंगे: पूर्ण केंद्रीकरण।
समाधान: दोनों justify-contentऔर align-itemsगुणों को
पर सेट करें center, और फ्लेक्स आइटम पूरी तरह से केंद्रित होगा:
उदाहरण
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
सीएसएस फ्लेक्सबॉक्स कंटेनर गुण
निम्न तालिका सभी सीएसएस फ्लेक्सबॉक्स कंटेनर गुणों को सूचीबद्ध करती है:
| Property | Description |
|---|---|
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |