फ्लेक्सबॉक्स

Question

का उपयोग कर कोनों में तत्वों को संरेखित करें मैं फ्लेक्सबॉक्स का उपयोग करके flex-container के चार कोनों में चार तत्व लगाने की कोशिश कर रहा हूं और मैं संघर्ष कर रहा हूं। मैं व्यक्तिगत flex-items की सामग्री को उचित ठहराने का तरीका नहीं समझ सकता। हर बार जब मैं कोशिश करता हूं, यह flex-container की सभी सामग्री को बाएं या दाएं (या मुख्य धुरी के आधार पर ऊपर/नीचे) में डाल देता है।

HTML:

.container { 
    display: -webkit-flex; 
    background-color:#ccc; 
} 

.top-left { 
/* ? */ 
} 

.top-right { 

} 

.bottom-left { 

} 

.bottom-right { 

} 

यहाँ एक बेला है दिखाता है कि मैं क्या करने की कोशिश कर रहा हूँ:

http://jsfiddle.net/JWNmZ/8/

Answer 1

यहाँ है

<div class="container"> 
    <div class="top-left"> 
     TL 
    </div> 
    <div class="top-right"> 
     TR 
    </div> 
    <div class="bottom-left"> 
     BL 
    </div> 
    <div class="bottom-right"> 
     BR 
    </div> 
</div> 

यहाँ मेरी सीएसएस है इसके लिए एक दृष्टिकोण (स्पष्टता के लिए छोड़े गए उपसर्ग): http://jsfiddle.net/JWNmZ/10/

.container { 
    display: flex; 
    flex-wrap: wrap; 
    background-color:#ccc; 
} 

.top-left { 
    flex: 50%; 
} 

.top-right { 
    flex: 50%; 
    text-align: right; 
} 

.bottom-left { 
    flex: 50%; 
} 

.bottom-right { 
    flex: 50%; 
    text-align: right; 
}