怎麼解決彈性盒子模型div塊因為文字大小而被撐開？

假設把一個w=100的div水平分為兩個1:1的子div，看起來應該是每個子div都w=50，但如果一個文字多些一個文字少些，width就 不再是1:1，而是隨文字多少而改變了大小。為什麼？怎麼解決？

HTML：

CSS：

效果：

瀉藥.

需要了解的是,Flex 分為三個階段的規範:

• Flex 2009 (display:box) Flexible Box Layout Module

• Flex 2011(display:flexbox)CSS Flexible Box Layout Module
• Flex 2012(display:flex)CSS Flexible Box Layout Module

各個瀏覽器支持情況如下:

.flex {
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}


如果無需兼容特別老的移動設備,請拋棄 flex 2009 的語法,該版本的瀏覽器實現存在太多問題,這裡就不一一列舉了.比如題主遇到的文字過多導致沒有等分的問題.

解決方法就是在 flex item 中加上 width:0,讓寬度由 box-flex 屬性來分配.最新的 flex 2012 規範沒有這個問題.

詳見Demo: JS Bin - Collaborative JavaScript Debugging

兼容性更好的解決方案是使用 table:

.foo {
display: table;
table-layout: fixed;
}