云计算应用开发 任务3 前台H5技术扩展阅读 7.2 重要flex属性flex-grow、flex-shrink、flex-basis.docx

/beka/p/8574189.html flex属性flex-grow、flex-shrink、flex-basis tip: 1）这些属性写在子元素中，作用于子元素（父元素中应设置display:flex） 　　2）作用是子元素如何分配父元素的空间 　　3） 　　　　flex-grow 是扩展比率，当子元素宽度总和小于父元素宽度时起作用，会按比例分配父元素剩余空间（按比例自适应） 　　　? flex-shrink 是收缩比率，当子元素宽度总和大于父元素宽度时起作用，会按比例收缩空间（按比例自适应）? ? ? ? ? ? flex-basis 伸缩基准值，子元素本来宽度 ?举例：flex:1 1 300px; template div class=test div class=top头部/div div class=main中间/div div class=bottom底部/div /div /template style lang=scss .test{ display: flex; display: -webkit-flex; justify-content: center; align-items: center; border: 1px solid red; box-sizing: border-box;　overflow: hidden; width: 100%; height: 500px; .top{ border: 1px solid blue; // 子元素可以随父元素自由伸缩 -webkit-flex: 1 1 300px; -ms-flex: 1 1 300px; flex: 1 1 300px; // width: 200px; height: 200px; } .main{ border: 1px solid green; // 子元素可以随父元素自由伸缩 flex: 1 1 300px; // width: 200px; height: 200px; } .bottom{ border: 1px solid black; // 子元素可以随父元素自由伸缩 flex: 1 1 300px; // width: 200px; height: 200px; } } /style 不管子元素宽度总和（300px+300px+300px）是否大于或小于父元素宽度，都会都会自适应父元素宽度 flex: 1 0 300px;扩张起作用；当父元素宽度大于900px(300px+300px+300px)时起作用，反之，不起作用 template div class=test div class=top头部/div div class=main中间/div div class=bottom底部/div /div /template style lang=scss .test{ display: flex; display: -webkit-flex; justify-content: center; align-items: center; border: 1px solid red; box-sizing: border-box; overflow: hidden; width: 100%; height: 500px; .top{ border: 1px solid blue; -webkit-flex: 1 0 300px; -ms-flex: 1 0 300px; flex: 1 0 300px; // width: 200px; height: 200px; } .main{ border: 1px solid green; flex: 1 0 300px; // width: 200px; height: 200px; } .bottom{ border: 1px solid black; flex: 1 0 300px; // width: 200px; height: 200px; } } /style 注意看中间框的大小变化，还有右下角样式变化当父元素小于900px时，子元素宽度一直保持300px flex:0 1 300px; 收缩起作用；注意看父元素小于900px