子元素可设置属性：
| 属性值 | 作用 |
|---|---|
| flex-basis | 设置弹性盒子伸缩基准值(子元素的基准值) |
| flex-grow | 设置弹性盒子的扩展比率 |
| flex-shrink | 设置弹性盒子的缩小比率 |
| flex | flex-grow、flex-shrink、flex-basis的缩写 |
flex-basis:设置了基准值后，原子元素的宽度将不再生效：
<style>.div0{display: flex;width: 400px;height: 500px;background-color: violet;}.div0 div{width:200px;height:200px;background-color: yellow;flex-basis: 50px; /* 基准值设置为50，则上面的width将失效 */flex-basis: 30%; /* 设置为百分比，则宽度为父对象的百分比，400*30% = 120px */}</style></head><body><div class="div0"><div>div1</div><div>div2</div></div></body>
也可以单独对子元素设置基准值：
.div0 div:nth-child(1){flex-basis: 50px;}.div0 div:nth-child(2){flex-basis: 100px;}
- flex-grow:1 表示该子元素占父元素剩余宽度的份数，将所有子元素设置的份数相加，得出总份数，用父元素剩余宽度除以总份数，计算出每份的宽度。新的子元素的宽度为原来的宽度+每份的宽度*份数。
- flex-grow属性描述当父元素有剩余空间时，子元素如何扩展自己的宽度，通过设置份数，来决定子元素扩展的比率。
flex-grow计算方式示例：
<style>.div0 {display: flex;width: 400px;height: 500px;background-color: violet;}.div0 div {width: 200px;height: 200px;background-color: yellow;flex-basis: 50px;}/*** flex-grow值计算规则：* 父元素的宽度为400* 子元素1的宽度为50* 子元素2的宽度为100* 剩余宽度为 400-50-100 = 250* 给两个子元素分别添加flex-grow:1* 即，每个子元素占一份，一共占2份* 250 / 2 = 125，即每份的宽度为125* 现在两个子元素的宽度为：* 子元素1: 50+125* 子元素2：100+125*/.div0 div:nth-child(1) {flex-basis: 50px;flex-grow:1;}.div0 div:nth-child(2) {flex-basis: 100px;flex-grow:1;}</style></head><body><div class="div0"><div>div1</div><div>div2</div></div></body>
效果：
flex-shrink
原理与flex-grow基本相同，区别为父元素的宽度不够显示所有子元素的宽度，此时通过设置该属性，可以将子元素缩小。
默认情况下，当子元素超出父元素宽度，会自动缩小，如果设置子元素不缩小，可以设置：
flex-shrink:0
计算方式为子元素的宽度总和-父元素的宽度，得出超出的宽度。
用超出的宽度 / 子元素设置的份数总和，得出每份的宽度。
子元素现在的宽度为：原来的宽度-每份的宽度*子元素设置的份数。
flex
flex的顺序不能错：flex-grow,flex-shrink,flex-basis
示例：
flex: 1 1 300px;flex: 4 3 300px;
