關於flex:1詳解；https://blog.csdn.net/qq_40138556/article/details/103967529
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
CSS屬性 flex 規定了彈性元素如何伸長或縮短以適應flex容器中的可用空間。這是一個簡寫屬性，用來設置 flex-grow, flex-shrink 與 flex-basis。
CSS flex-grow 屬性定義彈性盒子項（flex item）的拉伸因子。生長性
CSS flex-shrink 屬性指定了 flex 元素的收縮規則。flex 元素僅在默認寬度之和大於容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值。
CSS 屬性 flex-basis 指定了 flex 元素在主軸方向上的初始大小。如果不使用 box-sizing 改變盒模型的話，那么這個屬性就決定了 flex 元素的內容盒（content-box）的尺寸。
flex：1表示
flex-grow : 1; // 這意味着div將以與窗口大小相同的比例增長 flex-shrink : 1; // 這意味着div將以與窗口大小相同的比例縮小 flex-basis : 0; // 這意味着div沒有這樣的起始值，並且將根據可用的屏幕大小占用屏幕。例如： - 如果包裝器中有3個div，則每個div將占用33％。
需求，左邊一個div占用寬度80px, 右邊div的寬度全部占用， 可用flex屬性設置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> html, body { width: 100%; height: 100%; } .outer { height: 200px; width: 100%; display: flex; } .box1 {
//不生長，只占寬度80px flex: 0 0 80px; height: 100%; background: pink; } .box2 {
//剩余空間100占用 flex: 1; height: 100%; background-color: blue; } </style> </head> <body> <div class="outer"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
