010.flex · 每天一道面試題

`flex: 1`。它其實是一個縮寫，等價于`flex: 1 1 0`，也就是 ~~~ flex-grow : 1; flex-shrink : 1; flex-basis : 0; ~~~ * flex-grow 表示當有剩余空間的時候，分配給項目的比例 * flex-shrink 表示空間不足的時候，項目縮小的比例 * flex-basis 表示分配多余空間之前，項目占據主軸的空間 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" type="text/css" href="http://m.ocj.com.cn/common/ocjuxd/mobile/ocjH5Common.css"> <link rel="stylesheet" type="text/css" href="/image_site/event/2019/08/birthday/index.css"> <script type="text/javascript" src="http://m.ocj.com.cn/common/ocjuxd/mobile/ocjH5Common.js"></script> <script type="text/javascript" src="/image_site/event/2019/08/birthday/index.js"></script> <style> .container { display: flex; width: auto; height: 300px; background: grey; } .left { flex-basis: 200px; background: linear-gradient(to bottom right, green, white); flex-shrink: 0; } .middle { flex: 1; background: linear-gradient(to bottom right, yellow, white); overflow: scroll; white-space:nowrap; } .right { flex-basis: 300px; background: linear-gradient(to bottom right, purple, white); flex-shrink:0 } </style> </head> <body> <div class="container"> <div class="left">left</div> <div class="middle"> middle hshsh middle </div> <div class="right">right</div> </div> </body> </html> ~~~