CSS3 flexbox negative-flex如何工作？

最近我開始玩CSS3 flex box，我已經閱讀了很多資源，並且自己玩了一遍。我看着通過：http://www.w3.org/TR/css3-flexbox/CSS3 flexbox negative-flex如何工作？

具體我有在子元素中的彎曲特性麻煩：

flex: <positive-flex> <negative-flex> <preferred-size>

我似乎無法理解如何負彎曲參數的作品。 positive-flex是有意義的，因爲它從父元素向兒童按比例分配空間。

負-Flex，據我所知，應該在元素溢出時收縮元素。但是，我一直無法得到這個工作。任何幫助理解將不勝感激！

這裏是我一直在測試代碼：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; 
}

來源

2012-12-21 Sanketh Katta

在從歌劇院Flexbox的一篇文章，負彎曲被描述爲例如：

#first { 
    flex: 1 1 400px; 
} 

#second { 
    flex: 2 3 600px; 
} 

#third { 
    flex: 1 2 400px; 
}

負彈性值儘管名稱是正值 - 上述聲明中的第二個無單位值。這些僅在主軸方向溢出其父容器時才起作用。它們也作爲比例值，但是這次他們指定了將從每個孩子的尺寸減去尺寸的「溢出量」（兒童溢出他們的容器的量）的比例，以使整體尺寸減小等於父母的大小 - 實際上，停止溢出。

假設父容器沿主軸軸爲1100個像素。在這種情況下，我們上面的孩子會將它溢出300 像素（它們總共等於主軸上的1400個像素）。因爲對他們設置的負彎曲值：

的第一個孩子將得到它去掉了溢出量，這是50個像素的1/6。它的計算值因此將是350像素。

第二個孩子會從中移除溢出量的3/6，即150像素。其計算值因此將是450像素。

第三個孩子會從中移除溢出量的2/6，即100像素。其計算值因此將是300 像素。

所以更高的負彈性值實際上會導致更小的元素！

來源：http://dev.opera.com/articles/view/flexbox-basics/

來源

2012-12-21 23:48:20 cimmanon

CSS3 flexbox negative-flex如何工作？

回答

相關問題