सीएसएस का उपयोग करके सबसे चौड़े तत्व के लिए समान आइटम चौड़ाई कैसे सेट करें

आप इनलाइन फ्लेक्सबॉक्स का उपयोग करके वांछित लेआउट प्राप्त कर सकते हैं, जैसा कि दिखाया गया है सीएसएस समाधान प्रदान किया गया:

.list-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

.list {
  display: flex;
  flex-direction: column;
}

.list-item {
  text-transform: capitalize;
  background-color: rgb(200, 30, 40);
  font-size: 1.3em;
  text-align: left;
  padding: 10px;
  margin: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

इस सीएसएस में, हम .list-कंटेनर को इनलाइन फ्लेक्सबॉक्स डिस्प्ले के लिए सेट करते हैं, यह सुनिश्चित करते हुए कि इसके चाइल्ड .list तत्व क्षैतिज रूप से प्रदर्शित होते हैं। .list तत्वों में एक वर्टिकल फ्लेक्सबॉक्स डिस्प्ले होता है, जो उनके चाइल्ड .list-आइटम तत्वों को लंबवत रूप से स्टैक करने की अनुमति देता है। इसका मतलब यह है कि जब वे अपने .list कंटेनर के भीतर एक पंक्ति में फिट नहीं हो सकते हैं, तो वे स्वचालित रूप से अगली पंक्ति में आ जाएंगे।

इसके अलावा, हम .list- के लिए justify-content प्रॉपर्टी को flex-start पर सेट करते हैं। आइटम तत्व, जिसके कारण वे अपने .list कंटेनर के बाएं किनारे पर संरेखित होते हैं। यह सुनिश्चित करता है कि सबसे लंबा आइटम सूची में सभी आइटमों की चौड़ाई तय करता है।

इस सीएसएस को लागू करके, आप एक ऐसा लेआउट बना सकते हैं जहां सभी आइटमों की चौड़ाई सबसे चौड़े तत्व के समान हो, जो एक सुसंगत और सौंदर्यपूर्ण रूप से सुखद सुनिश्चित करता है उपस्थिति।