सीएसएस औचित्य-सामग्री संपत्ति
उदाहरण
कंटेनर के केंद्र में फ्लेक्स आइटम संरेखित करें:
div
{
display: flex;
justify-content: center;
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
गुण लचीले कंटेनर की वस्तुओं को justify-content
संरेखित करता है जब आइटम मुख्य-अक्ष (क्षैतिज) पर सभी उपलब्ध स्थान का उपयोग नहीं करते हैं।
युक्ति: आइटम को लंबवत रूप से संरेखित करने के लिए align-items प्रॉपर्टी का उपयोग करें ।
डिफ़ॉल्ट मान: | फ्लेक्स-स्टार्ट |
---|---|
विरासत में मिला: | नहीं |
एनिमेटेबल: | नहीं। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | CSS3 |
जावास्क्रिप्ट सिंटैक्स: | ऑब्जेक्ट .style.justifyContent = "स्पेस-बीच" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
-वेबकिट- या -मोज़ के बाद की संख्याएं- पहले संस्करण को निर्दिष्ट करें जो उपसर्ग के साथ काम करता है।
Property | |||||
---|---|---|---|---|---|
justify-content | 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
सीएसएस सिंटेक्स
justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;
सम्पत्ति की कीमत
Value | Description | Play it |
---|---|---|
flex-start | Default value. Items are positioned at the beginning of the container | |
flex-end | Items are positioned at the end of the container | |
center | Items are positioned in the center of the container | |
space-between | Items will have space between them | |
space-around | Items will have space before, between, and after them | |
space-evenly | Items will have equal space around them | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
और ज्यादा उदाहरण
उदाहरण
कंटेनर की शुरुआत में फ्लेक्स आइटम संरेखित करें (यह डिफ़ॉल्ट है):
div
{
display: flex;
justify-content: flex-start;
}
उदाहरण
कंटेनर के अंत में फ्लेक्स आइटम संरेखित करें:
div
{
display: flex;
justify-content: flex-end;
}
उदाहरण
पंक्तियों के बीच रिक्त स्थान के साथ फ्लेक्स आइटम प्रदर्शित करें:
div
{
display: flex;
justify-content: space-between;
}
उदाहरण
पंक्तियों के पहले, बीच और बाद में रिक्त स्थान के साथ फ्लेक्स आइटम प्रदर्शित करें:
div
{
display: flex;
justify-content: space-around;
}
संबंधित पृष्ठ
सीएसएस संदर्भ: संरेखित-सामग्री संपत्ति
सीएसएस संदर्भ: संरेखित-आइटम संपत्ति
सीएसएस संदर्भ: संरेखित-स्वयं संपत्ति
HTML DOM संदर्भ: जस्टिफाई कंटेंट प्रॉपर्टी