1、flex的屬性及作用
flex有三種屬性：依次為flex-grow（放大）、flex-shrink（縮小）、flex-basis（項目原本大小）
flex-grow：當設置該屬性時，如果父元素仍有多余空間則進行放大，其中數值代表的是放大比例，值為0時不放大；
flex-shrink：當設置該屬性時，如果父元素小於子元素空間加和，則子元素進行縮小(shrink)，其中數值代表的是縮小比例，值為0時不縮小；
flex-basis：當設置該屬性時，其定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。
flex 相當於三種屬性的縮寫，flex的默認屬性是0 1 auto ；flex:none;的值為 0 0 auto；flex:auto;的值為 1 1 auto；flex:1 的值是1 1 0%
2、flex的縮放比例
flex的縮放比例：子元素在父元素內所占空間的比例
縮放前的樣式和各部分尺寸：
縮放后的樣式和各部分尺寸：
3、其他尺寸樣式和flex之間的優先級
子元素設置flex或者flex-basis、則子元素的width會默認失效(flex > width)
子元素設置max-width、則子元素的flex或者flex-basiswidth會默認失效且在縮放時會優先縮放其他沒設置max-width的元素，直到它和其他元素比例匹配時才同步縮放。
例如：flex:1 設置max-width:100px，flex: 2、flex:3、不設置，縮放時直到flex: 2 的width 為200px ，flex:3的width為300px后，三者才繼續同步縮放
子元素設置min-width、則是在放大的過程中會優先放大其他沒設置min-width的元素，直到它和其他元素比例匹配時才同步縮放
縮放前：
縮放后：未到比例值
縮放后：未到比例值
測試代碼：
.wrap{ height: 300px; } .flex{ display: flex; } .flex1{ flex: 1; background: yellow; width: 300px; /*min-width: 150px;*/ /*max-width: 200px;*/ } .flex2{ flex: 2; background: blue; } .flex3{ flex: 3; background: pink; } .left,.right,.middle{ height: 100%; } .plus{ width: 100%;
height: 300px; background: aquamarine; } </style> <body> <div class="wrap flex"> <div class=" left flex1" id="left" onclick="getWidth()"></div> <div class=" middle flex2" id="middle" onclick="getWidth()"></div> <div class=" right flex3" id="right" onclick="getWidth()"></div> </div> <div class="plus" onclick="getId()" id="plus"></div> </body> <script> function getWidth() { let evt; evt = evt || window.event; let obj = evt.target || evt.srcElement; let Eid = obj.id; let currentElementWidth = document.getElementById(Eid).offsetWidth; document.getElementById(Eid).innerHTML= currentElementWidth.toString() } </script>