/ / एक कॉलम के लिए सीएसएस, फ्लेक्सबॉक्स के साथ भाई बहनों के साथ दो पंक्तियां (बेनिन के ध्वज की तरह!) - सीएसएस, फ्लेक्सबॉक्स

एक कॉलम के लिए सीएसएस, फ्लेक्सबॉक्स के साथ भाई बहनों के साथ दो पंक्तियां (बेनिन के ध्वज की तरह!) - सीएसएस, फ्लेक्सबॉक्स

यह सरल तरीका है जिसे मैंने समझाया है, यह आपको बेनिन का ध्वज दिखाने के लिए है:

यहां छवि विवरण दर्ज करें

मैं सीएसएस में फ्लेक्सबॉक्स के साथ कुछ ऐसा करना चाहता हूं, लेकिन अब तक मुझे झुका हुआ है।

कुंजी यह है कि मुझे तीनों क्षेत्रों में से प्रत्येक को भाई बहन होने की ज़रूरत है, जैसे कुछ:

<div class=flag>
<div class=green></div>
<div class=yellow></div>
<div class=red></div>
</div>
.flag {
display:flex;
flex-direction: row;
}

/* below this I"m not sure */
.green {

}

.red, .yellow {

}

क्या यह मध्यस्थ नोड को जोड़ने के बिना संभव है .red तथा .yellow? यह उस बिंदु पर आसान है, लेकिन मैं यह जानना चाहता हूं कि ऊपर वर्णित करने के लिए यह संभव है या नहीं।

उत्तर:

उत्तर № 1 के लिए 11

आप अपने बेनिन ध्वज प्राप्त करने के लिए रैपिंग कॉलम का उपयोग कर सकते हैं:

पहला (बाएं) कॉलम है। ग्रीन पर height:100% .flag कंटेनर के सापेक्ष।

दूसरा (दाएं) कॉलम है। प्रिय, .red पर height:50% .flag के सापेक्ष

और .ग्रीन आवंटित किया जाता है width:40% .flag के सापेक्ष

आपकी परियोजना के लिए शुभकामनाएं!

यहां छवि विवरण दर्ज करें

.flag{
position:relative;
display:flex;
flex-flow:column wrap;
width:200px;
height:150px;
border:2px solid black;
}

.green{background:green;}
.yellow{background:yellow;}
.red{background:red;}

.col1{width:40%;height:100%;}
.col2{width:60%;height:50%;}
<div class=flag>
<div class="col1 green"></div>
<div class="col2 yellow"></div>
<div class="col2 red"></div>
</div>