Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS से फ्लेक्स आइटम बढ़ने का अनुपात सेट करें

CSS flex-grow प्रॉपर्टी निर्दिष्ट करती है कि फ्लेक्स आइटम बाकी आइटम्स के सापेक्ष कितना बढ़ेगा जब अतिरिक्त स्थान उपलब्ध हो। डिफ़ॉल्ट 0 है।

उदाहरण

<!DOCTYPE html> <html>    <head>       <style>          .mycontainer {             display: flex;             background-color: orange;             align-content: space-between;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }          </style>    </head>    <body>       <h1>Quiz</h1>       <div class = "mycontainer">          <div style = "flex-grow: 1">Q1</div>          <div style = "flex-grow: 1">Q2</div>          <div style = "flex-grow: 20">Q3</div>          <div style = "flex-grow: 1">Q4</div>          <div style = "flex-grow: 1">Q5</div>       </div>    </body> </html>

व्याख्या: Q3 को flex-grow: 20 दिया गया है, जबकि अन्य को 1। इसलिए Q3 उपलब्ध अतिरिक्त स्थान का 20/24 भाग लेगा, बाकी 1/24 प्रत्येक।

  1. - CSS से फ्लेक्स आइटम्स को क्षैतिज रूप से सेट करें

    flex-direction: row flex-direction प्रॉपर्टी को row मान के साथ उपयोग करके फ्लेक्स-आइटम्स को क्षैतिज रूप से सेट करें। उदाहरण <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex; flex-direction: row; background-color: #2C3E50;

  1. - CSS के साथ ग्रिड आइटम्स को नाम दें

    CSS में ग्रिड आइटम्स को नाम देने के लिए, grid-area प्रॉपर्टी का उपयोग grid-template-areas प्रॉपर्टी के साथ किया जाता है। यह लेआउट को विज़ुअल रूप से परिभाषित करने का एक सहज तरीका प्रदान करता है। उदाहरण <!DOCTYPE html> <html> <head> <style> .container {

  1. - CSS के साथ फ्लेक्स आइटम्स को कंटेनर के केंद्र में संरेखित करें

    justify-content प्रॉपर्टी को center मान के साथ उपयोग करके फ्लेक्स आइटम्स को मुख्य अक्ष के साथ केंद्र में संरेखित किया जाता है। यह क्षैतिज केंद्र संरेखण के लिए सबसे आम तरीका है। उदाहरण <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex;