flex布局原理

#（1）#
1.布局原理
1.当父元素flex布局之后，子元素float、clear、vertical-align失效；
2.flex布局：通过给父级盒子添加flex属性，控制子盒子位置和排列方式；
flex布局父项常见（父元素添加）display：flex;
1.flex-direction:设置主轴方向
flex-direction: row 从左到右
flex-direction: row-reverse 从右到左
2.侧轴：flex-direction: column 从上到下flex-direction: column-reverse 从下到上
主轴根据flex-direction确定

2.justify-content:设置主轴上的子元素排列方式注 ！！一定是主轴，不能是侧轴
display：flex;
flex-direction:row;
1.justify-content:flex-start 从头开始，从左到右
2.justify-content:flex-end 从尾部排列justify-content:center 居中对齐
justify-content：space-around 平分剩余空间
justify-content：space-between 两边贴边，在平分剩余空间
justify-content: space-evenly 所有间距都是相同的

3.flex-wrap 设置子集是否换行
默认flex布局中，默认子元素不换行，如果装不下，会缩小盒子width默认
:flex-wrap: nowrap 不换行
flex-wrap: wrap 换行

4.align-items 设置侧轴上子元素排列方式1.align-items: flex-start 从上到下
2.align-items: flex-end 从下到上
3.align-items: center 垂直居中（挤在一起居中）
4.align-items: stretch (了解) 不设高会拉伸变形只适合单行

5.align-content (侧轴排列) 多行
子元素出现换行出现
flex-wrap: wrap 此时换行用
align-content
1.align-content: flex-start 从上到下
2.align-content: flex-end 从下到上
3.align-content: center 居中
4.align-content: streth 拉伸 （跟高度有关）
5.align-content: space-between 分布两边，再平分空间
6.align-content: space-around 平分剩余空间

6.flex-flow 是 flex-direcition 和 flex-wrap 属性的复合属性flex-flow: row/column wrap
#（2）#
flex布局子项常
1.flex属性定义子项目分配剩余空间用flex表示占多少份
固定 flex:1 固定

2.align-self 控制子项自己在在侧轴上的排列方式
1.align-self：flex-start 从上到下
2.align-self： flex-end 从下到上
3.align-self：center 居中（子元素）align-self 可覆盖 align-items 属性（父元素）

3.order 控制排列项序，数值越小，越靠前，默认0 order：-1；子元素反过来排