सीएसएस एलाइन-कंटेंट गुण

विवरण और इस्तेमाल

align-content गुण संशोधन flex-wrap गुण के व्यवहार का align-items समान है, लेकिन यह एलस्टिक प्रयोज्यों को नहीं संतुलित करता, बल्कि एलस्टिक रेखा को संतुलित करता है。

ध्यान दें:इस गुण के लिए कई पंक्तियां होनी चाहिए!

सूचना:इस्तेमाल करें justify-content गुण मुख्य अक्ष (main-axis) पर प्रयोज्यों को विस्तर रूप से स्तरीय रूप से बराबर करता है。

और देखें:

CSS शिक्षण:CSS फ्लेक्सबॉक्स

CSS शिक्षण:CSS ग्रिड

CSS संदर्भ दस्तावेज़:align-items गुण

CSS संदर्भ दस्तावेज़:align-self गुण

CSS संदर्भ दस्तावेज़:justify-content गुण

HTML DOM संदर्भ दस्तावेज़:alignContent गुण

इस्टांस

एलस्टिक कंटेनर के मध्य में वाक्यांश पैक करें:

div {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

अपने आप प्रयास करें

CSS व्याकरण

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

गुण मान

मान वर्णन
stretch डिफ़ॉल्ट मान। वाक्यांश बचे स्थान को ले लेते हैं
center एलस्टिक कंटेनर के मध्य की ओर वाक्यांश पैक करें
flex-start एलस्टिक कंटेनर के शुरू की ओर वाक्यांश पैक करें
flex-end एलस्टिक कंटेनर के अंत की ओर वाक्यांश पैक करें
space-between एलस्टिक कंटेनर में वाक्यांश एकीकृत रूप से बांटे गए हैं。
space-around एलस्टिक कंटेनर में वाक्यांश एकीकृत रूप से बांटे गए हैं, दोनों ओर आधा हिस्सा लेते हैं。
initial इस गुण को उसके डिफ़ॉल्ट मान पर निर्धारित करें। देखें initial。
inherit इस गुण को उसके माता एलीमेंट से विरासत करें। देखें inherit。

तकनीकी विवरण

डिफ़ॉल्ट मान: stretch
विरासत: नहीं
एनिमेशन निर्माण: असमर्थित। देखें:एनिमेशन से संबंधित गुण。
संस्करण: CSS3
JavaScript व्याकरण: object.style.alignContent="center"

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

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

च्रोम आईई / एज फायरफॉक्स सफारी ओपेरा
च्रोम Edge फायरफॉक्स सफारी ओपेरा
57.0 16.0 52.0 10.1 44.0