5
Tôi bắt đầu chơi xung quanh với hộp CSS3 flex gần đây, tôi đã đọc qua nhiều tài nguyên và chơi xung quanh với nó bản thân mình. Tôi đã nhìn qua: http://www.w3.org/TR/css3-flexbox/CSS3 flexbox negative-flex hoạt động như thế nào?
Cụ thể là tôi đang gặp rắc rối với tài sản flex trên yếu tố con:
flex: <positive-flex> <negative-flex> <preferred-size>
tôi dường như không thể hiểu được cách thức hoạt động tham số tiêu cực-flex. Tích cực-flex có ý nghĩa vì nó phân phối không gian tương ứng từ các yếu tố cha mẹ cho trẻ em.
Phủ định flex, từ những gì tôi hiểu là nghĩa vụ phải thu nhỏ các phần tử khi chúng tràn phụ huynh. Tuy nhiên, tôi không thể làm được điều này. Bất kỳ sự hiểu biết trợ giúp nào cũng sẽ được đánh giá cao!
Dưới đây là đoạn code tôi đã thử nghiệm với: http://jsfiddle.net/nxzQQ/2/
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
CSS:
#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;
}