TA貢獻2080條經驗 獲得超4個贊
恩恩，首先'box'吶是比較早的語法，使用它時需要帶上前綴，比如 display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */，而"flex"是2012年的語法，是css3新規定的，也將是以后標準的語法。
至于實際中的用法，舉個例子：
1234567891011121314151617181920212223242526272829303132333435363738<!DOCTYPE html><html><head><style> div{ display:-webkit-box; /* Safari and Chrome */display:box;width:300px;border:1px solid black;} #p1{-webkit-box-flex:1.0; /* Safari and Chrome */box-flex:1.0;border:1px solid red;} #p2{-webkit-box-flex:2.0; /* Safari and Chrome */box-flex:2.0;border:1px solid blue;}</style></head><body> <div><p id="p1">Hello</p><p id="p2">World</p></div></body></html>
運行結果：
將父元素的display屬性設置為-webkit-box（box），然后子元素通過屬性box-flex來指定一個框的子元素是否是靈活的或固定的大小，如上，定義兩個靈活的p元素。如果父級box的總寬度為300px，＃P1將有一個100px的寬度，＃P2將有一個200px的寬度，也就是呈固定比例劃分，多看看css3的新屬性，去了下彈性盒子模型。
以上是自己的一點拙見，歡迎批評指正。
希望能夠幫助到你，望采納。
舉報