flex 是 flex-grow、flex-shrink、flex-basis的縮寫
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> #main { width:220px; height:300px; border:1px solid black; display:flex; } #main div { flex:1; } </style> </head> <body> <div id="main"> <div style="background-color:coral;">紅色</div> <div style="background-color:lightblue;">藍色</div> <div style="background-color:lightgreen;">帶有更多內容的綠色 div</div> </div> <p><b>注意:</b> Internet Explorer 9 及更早版本不支持 flex 屬性。</p> <p><b>注意:</b> Internet Explorer 10 通過 -ms-flex 屬性來支持。 IE11 及更新版本完全支持 flex 屬性 (不需要 -ms- 前綴)。</p> <p><b>注意:</b> Safari 6.1 (及更新瀏覽器) 通過 -webkit-flex 屬性支持。</p> </body> </html>
flex:1 翻譯過來就是
flex-grow : 1; // 這意味着div將以與窗口大小相同的比例增長 flex-shrink : 1; // 這意味着div將以與窗口大小相同的比例縮小 flex-basis : 0; // 這意味着div沒有這樣的起始值，並且將根據可用的屏幕大小占用屏幕。例如： - 如果包裝器中有3個div，則每個div將占用33％。