flex理论浅析

flex(弹性布局)

父元素设置display:flex后，子元素均变为行内块元素。
子元素的float、clear和vertical-align(垂直对齐)属性将失效。

对父元素使用

• flex-direction设置主轴方向

row/row-reverse 即x轴正向/反向,x为主轴，y为侧轴
column/column-reverse

• flex-wrap设置主轴方向上的子元素是否换行

nowrap 默认不换行，即使给子元素设置宽度，也会自适应父元素，而缩小子元素本身的宽度
wrap 换行

• flex-flow设置以上两项

• justify-content主轴上子元素的排序方式，必须先确定主轴再使用属性

flex-start 从主轴正方向开始
flex-end
center 在主轴中居中
space-around 平分空间
space-between 两边贴边，再平分空间

• align-items侧轴上的排序方式，必须先确定主轴再使用属性

flex-start 
flex-end
center 
stretch 默认值，拉伸

• align-content
  

对子元素使用

• 设置占多少份
• align-self单独的子元素在侧轴上的排序方式

默认值为auto，继承父元素的align-items

order定义项目的排序顺序

默认为0，-1则前进一位