flex弹性盒模型布局
使用传统的float position布局很繁琐，复杂的布局很难实现，flex布局现在很多的浏览器上都已支持，移动端布局十分方便。
1.png
设置弹性盒子
- 当确定某些元素需要弹性盒子模型布局，让他的父元素（容器）设置成
display:flex - 如果设置行类元素为flexbox 设置
display:inline-flex
flex模型
- 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
- 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
- 设置了
display: flex的父元素（在本例中是 ``）被称之为 flex 容器（flex container）。 -
主轴方向
flex-direction设置主轴方向column,row,column-reserve,row-reserve
换行
- 当在布局时定宽或者定高，但内容溢出，会使布局被破坏这个时候需要换行
flex-wrap来换行
flex的动态尺寸
当flex如上设置，每个flexBox都是平分主轴上可用空间的大小通过设置flex:1 flex:2就会按比例计算每个占主轴的比例 flex:1 200px来设置flexBox的最小值，表示每flexBox元素先分配200px大小，剩余空间按照比例来分配
水平和垂直对齐
-
align-items控制flexbox在交叉轴上的位置。默认stretch会在交叉轴上拉升，填满交叉轴方向。center会保持原来的大小，在交叉轴上居中，也可以设置flex-start,flex-end来设置在交叉轴位置。 - 可以在flexBoxs上设置
align-self上覆盖align-items的值。 -
justify-content控制flex项在主轴上的位置flex-start移到主轴开始处，flex-end移到主轴结束处。center居中,space-around均匀分布在主轴,space-between和space-aroud相似，但是左右两侧不会有空间
flex项排序
在容器内的flexbox设置 order默认值为0越大越靠后，可以设置-1来排在前面。
flex嵌套
弹性盒子也能创建一些颇为复杂的布局。设置一个元素为flex项目，那么他同样成为一个 flex 容器，它的孩子(直接子节点)也表现为 flexible box 。
