flex布局

1. flex布局主要有2个方向，主轴和交叉轴(flex布局会默认消除float属性)

<style>
.parent{
    display: flex;
    flex-wrap: wrap; //默认是不换方向的(nowrap wrap-reverse)
    flex-direction: column; //默认是横向(row row-reverse column-reverse)
    justify-content: center; //主轴方向有几个选项(flex-start flex-end space-between space-around)
    align-items: center; //交叉轴方向(针对于多行 flex-start flex-end stretch baseline)
    flex-flow: column wrap; //方向和换行(默认是row nowrap)
}
.parent div{
    flex:1;  //子元素占比(比较灵活，)
    width: 20%; //与父元素搭配使用(使用率较高，父元素需给宽度，且设置flex-wrap:wrap属性);
    align-self: flex-start(自身在父轴的方向)
    order: -1; (默认是0，order值越小越靠前)
}
</style>
<div class="parent">
    <div><div>
    <div><div>
    <div><div>
</div>