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％。