本文参与4月更文挑战，打卡day12，第十二篇
定义在子节点的属性
order
定义flex项目的顺序，值越小越靠前。
flex-grow
设置 flex 项主尺寸的 flex 增长系数（当浏览器页面放大的时候子元素跟随放大的比例）。
负值无效，默认为 0（表示不变大）。
flex-shrink
指定 flex 元素的收缩规则（当浏览器页面缩小的时候子元素跟随缩小的比例）。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据flex-shrink的值。
负值无效，默认为1。
flex-basis
指定 flex 元素在主轴方向上的初始宽度大小。
取值：
可以是
length（即50px）; 该值也可以是一个相对于其父弹性盒容器主轴尺寸的百分数 。负值是不被允许的。默认为auto。
flex
flex-grow、flex-shrink、flex-basis的缩写。
常用取值：
flex:auto;表示flex: 1 1 auto
flex:none;表示flex: 0 0 auto
14. 响应式布局(使用较多)
media查询
当屏幕宽度满足特定条件时应用css。
不同设备下背景颜色不同的设置
/* 当屏幕宽度大于768px的时候使用以下样式 即当屏幕宽度>768px背景颜色会发生改变 */
@media(min-width: 768px) {
.container {
width: 960px;
background-color: lightblue;
}
}
/* 可以书写多个这样的效果 可以实现在宽度不同的情况下出现不同属性 */
响应式布局例子
对子级div增加style属性实现1:2:3的分布
Bootstrap
以上方法较为复杂，因此可以预定义一份的大小（使用Bootstrap方法），一般可以将父盒子分为12块（12的公因子比较多 1、2、3、4、6、12），此外不同设备有不同css样式，区分设备是否相同主要是依据宽高，这样的不同的宽高可以分为以下几类：
- xs(extremely small) 极小
- sm(small) 小
- md(medium) 中等
- lg(large) 大
- xl(extremely large) 极大
接下来以
定义中等情况下的样式为预定义大小为例：
同样能够实现
1:2:3的分布
此处如果子盒子过多会自动折叠实现以下效果：
