CSS display प्रॉपर्टी से HTML एलिमेंट के बॉक्स प्रकार निर्दिष्ट करें

CSS display प्रॉपर्टी किसी HTML एलिमेंट द्वारा उत्पन्न बॉक्स के प्रकार (ब्लॉक, इंलाइन, फ्लेक्स, ग्रिड, आदि) को निर्दिष्ट करती है। यह लेआउट सिस्टम का आधार है और तत्व के व्यवहार को मौलिक रूप से बदलती है।

उदाहरण

नीचे दिए गए उदाहरण में, display: flex का उपयोग करके फ्लेक्स कंटेनर बनाया गया है और एक आइटम पर align-self: center से व्यक्तिगत संरेखण ओवरराइड किया गया है।

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      height: 300px;
      background-color: orange;
    }
    .mycontainer > div {
      background-color: white;
      text-align: center;
      line-height: 90px;
      font-size: 40px;
      width: 100px;
      margin: 50px;
    }
  </style>
</head>
<body>
  <h1>Quiz</h1>
  <div class="mycontainer">
    <div>Q1</div>
    <div>Q2</div>
    <div>Q3</div>
    <div style="align-self: center">Q4</div>
    <div>Q5</div>
  </div>
</body>
</html>

display के मुख्य मान:

नोट: display बदलने से तत्व का डिफ़ॉल्ट व्यवहार पूरी तरह बदल जाता है।