CSS place-content गुण

परिभाषा और उपयोग

place-content विशेषता विकल्पीय बॉक्स (flexbox) और ग्रिड (grid) लेआउट के लिए उपयोग की जाती है और निम्नलिखित विशेषताओं का बटुआ है:

यदि place-content विशेषता दो मानों का है:

place-content: start center;
  • align-content विशेषता का मान 'start' है
  • justify-content विशेषता का मान 'center' है

यदि place-content विशेषता केवल एक मान है:

place-content: end;
  • तो align-content और justify-content विशेषताओं के मान 'end' हैं

उदाहरण

उदाहरण 1

विकल्पीय रूप में निर्धारित बलशक्ति को विकल्पीय कंटेनर के निचले हिस्से से जुड़ाया जाता है और विकल्पीय वस्तुओं के बीच की समान अंतराल बनाई जाती है:

#container {
  display: flex;
  place-content: end space-between;
}

स्वयं अभिप्राय करें

उदाहरण 2: ग्रिड लेआउट

ब्लॉक दिशा में अतिरिक्त जगह प्रत्येक ग्रिड परियोजना के चारों ओर समान रूप से वितरित होती है, और ग्रिड परियोजना वानी दिशा में मध्य में एलाइन होती है:

#container {
  display: grid;
  place-content: space-around center;
}

स्वयं अभिप्राय करें

CSS व्याकरण

place-content: normal|value|initial|inherit;

गुण मान

मान वर्णन
नोर्मल

मूलभूत मान। लेआउट के संदर्भ में निर्भर करता है

align-content और justify-content के लिए वैल्यू निर्दिष्ट नहीं करने के बराबर है
स्ट्रेच

ग्रिड : यदि आकार निर्दिष्ट नहीं किया गया है, तो ग्रिड परियोजना फैल जाएगी और ग्रिड कंटेनर को भर जाएगी

एलस्टिक बॉक्स : यदि एलस्टिक परियोजना क्रॉस अक्ष पर आकार निर्दिष्ट नहीं किया गया है, तो यह क्रॉस अक्ष पर फैल जाएगा और एलस्टिक कंटेनर को भर जाएगा
start परियोजना को ब्राउज़र के शुरुआती स्थान पर एलाइन करें
end परियोजना को ब्राउज़र के अंतस्थान पर एलाइन करें
center परियोजना को ब्राउज़र के केंद्रीय स्थान पर एलाइन करें
space-between दोनों अक्षों पर उपलब्ध जगह को समान रूप से वितरित करें, ताकि परियोजनाओं के बीच बराबर जगह हो
space-around दोनों अक्षों पर उपलब्ध जगह को समान रूप से वितरित करें, ताकि प्रत्येक परियोजना के चारों ओर बराबर जगह हो
space-evenly दोनों अक्षों पर परियोजनाओं को समान रूप से वितरित करें
overflow-alignment

'safe' : यदि सामग्री ओवरफ्लो हो, तो परियोजना को 'start' पर एलाइन करें

'unsafe' : परियोजना की सामग्री ओवरफ्लो रहे या नहीं, एलाइनमेंट वैल्यू अच्छा रूप से बनाए रखें
इनीशियल इस गुण को इसके मूलभूत मान पर सेट करें। संदर्भ देखें इनीशियल।
इनहेरिट इस गुण को उसके माता एलेमेंट से इनहेरिट करें। संदर्भ देखें इनहेरिट।

तकनीकी विवरण

मूलभूत मान: नोर्मल
विरासतीयता: नहीं
एनिमेशन निर्माण: न समर्थित। संदर्भ देखें:एनिमेशन संबंधी गुण।
संस्करण: CSS3
जेवेस्क्रिप्ट व्याकरण: object.style.placeContent="end space-around"

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को प्रदर्शित करते हैं।

च्रोम एज फायरफॉक्स सफारी ओपेरा
59.0 79.0 53.0 11.0 46.0

संबंधित पृष्ठ

तालीमी:CSS ग्रिड लेआउट

तालीमी:CSS एलस्टिक बॉक्स लेआउट

सन्दर्भ:सीएसएस एलाइन-कंटेंट गुण

सन्दर्भ:CSS जस्टिफाइ-कंटेंट प्रभाव

सन्दर्भ:HTML DOM एलाइन-कंटेंट प्रभाव