flex缩放以及影响其大小的优先级
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>
