मैंने हाल ही में CSS3 फ्लेक्स बॉक्स के साथ खेलना शुरू कर दिया है, मैंने कई संसाधनों के माध्यम से पढ़ा है और इसके साथ स्वयं खेला है। मैं के माध्यम से देखा है:CSS3 फ्लेक्सबॉक्स नकारात्मक-फ्लेक्स काम कैसे करता है?
flex: <positive-flex> <negative-flex> <preferred-size>
मैं कैसे नकारात्मक-फ्लेक्स पैरामीटर काम करता है समझने के लिए प्रतीत नहीं कर सकते हैं: http://www.w3.org/TR/css3-flexbox/
विशेष रूप से मैं बच्चे के तत्वों पर फ्लेक्स संपत्ति के साथ समस्या हो रहा हूँ। पॉजिटिव-फ्लेक्स समझ में आता है क्योंकि यह पैरेंट तत्व से आनुपातिक रूप से बच्चों को अंतरिक्ष में वितरित करता है।
नकारात्मक-फ्लेक्स, जो मैं समझता हूं उससे तत्वों को कम करना होता है जब वे माता-पिता को बहते हैं। हालांकि, मैं इसे काम करने में सक्षम नहीं हूं। किसी भी मदद समझ की सराहना की जाएगी!
यहाँ कोड मैं के साथ परीक्षण किया गया है: http://jsfiddle.net/nxzQQ/2/
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
सीएसएस:
#container {
width: 100%;
height: 200px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#container > :nth-child(1) {
background-color: red;
-webkit-flex: 1 0 0px;
flex: 1 0 0px;
}
#container > :nth-child(2) {
background-color: blue;
-webkit-flex: 2 0 0px;
flex: 2 0 0px;
}
#container > :nth-child(3) {
background-color: orange;
-webkit-flex: 1 0 0px;
flex: 1 0 0px;
}