flex布局总结

1。基本认识

父元素设置display:flex;之后子元素的float vertical-align clear属性都将失效
子元素会自动成为容器成员

2，容器的6大属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction决定主轴的方向，垂直或者水平
    row  :起点左边，水平
    row-reverse  :起点右边，水平
    column  :起点上边，垂直
    column-reverse  :起点下边，垂直
flex-wrap 默认情况下项目排布都是在一条轴线上，此属性决定换行的性质
    nowrap:就是默认的，不换行，超出的不显示
    wrap:换行，第一行在上边
    wrap-reverse:换行，第一行在下边
flex-flow一般情况下是用不上的，此属性是flex-direction属性和flex-wrap属性的组合
    默认是row wrap
justify-content定义项目在主轴上的对齐方式
    flex-start:也就是默认的左对齐
    flex-end右对齐
    center居中
    space-between两端对齐，项目之间的间隔是相等的
    space-around两端对齐居中
align-items定义项目在交叉轴上的对齐方式
    flex-start
    flex-end
    center
    stretch
    baseline
align-content只针对多根轴线起作用
    flex-start
    flex-end
    center
    space-around
    spcae-between

3.项目的属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order 规定了项目的排列的顺序 默认是0
flex-grow，和flex类似，决定项目的放大比例，默认是0
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。