flex布局

父盒子相关的属性

1.设置为弹性盒

display : flex / inline-flex 行内块级弹性盒 （为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。元素成为弹性盒后，子元素会产生块级框，不论任何类型元素都可以设置宽高了）

2.规定主轴方向

  flex-direction:row(默认值) column  row-reverse column-reverse

3.规定换行

  flex-wrap: nowrap(默认值)  wrap wrap-reverse

4.规定调整伸缩项目在主轴上的对齐方式

  justify-content 

• flex-start 默认值，起点对齐

• flex-end 终点对齐

• center 居中对齐

• space-around 分开边距对齐（相当于给每一个伸缩项，添加一个相同的外边距）

• space-between 分开两边对齐（一个靠左边，一个靠右边，中间平均分配）

• space-evenly 每个伸缩项中间的距离绝对相等

5.规定调整伸缩项目多行在主轴上的对齐方式，一定要有换行这个属性

• flex-start 默认值，起点对齐

• flex-end 终点对齐

• center 居中对齐

• space-around 分开边距对齐（相当于给每一个伸缩项，添加一个相同的外边距）

• space-between 分开两边对齐（一个靠左边，一个靠右边，中间平均分配）

• space-evenly 每个伸缩项中间的距离绝对相等

6.规定单行伸缩项目在侧轴方向对齐方式

• flex-start 默认值，起点对齐

• flex-end 终点对齐

• center 居中对齐

7.flex-flow 主轴方向和换行属性简写

  row nowrap (简写 规定主轴方向，以及换不换行)

子盒子相关的属性

1.规定子盒子占父盒子的分数，默认值 0 ，不占份数

  flex : 0 ; 通常写 flex: 1 ;

2.规定调整伸缩项目在伸缩容器中的排列位置

  order: 0; 

  默认值是0，值越小越靠前

3.规定调整单行伸缩项目在侧轴上的对齐方式

align-self

lign-self 规定调整单行伸缩项目在侧轴上的对齐方式 ​

auto 默认值，自动按照伸缩容器上设置

align-items规定的值执行 ​

stretch 拉伸对齐 ​

flex-start 起点对齐 ​

flex-end 终点对齐 ​

center 居中对齐 ​

baseline 基线对齐