flex布局

布局的传统解决方案，基于盒模型，依赖display属性+position属性+float属性。但是对于一些特殊的布局不方便，比如：垂直居中：

传统：

方法一：position

/*父盒子*/
.parent{
    position:relative;
}
/*子盒子*/
.child{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
}

方法二：position+transform

/*父盒子*/
.parent{
    position:relative;
}
/*子盒子*/
.child{
    position:absolute;
    left:50%;
    right:50%;
    transform:translate(-50%,-50%)
}

方法三：flex

/*只需要给父盒子添加*/
.parent{
    display:flex;
    display:-webkit-flex;/*Safari*/
    justify-content:center;//主轴
    align-items:center;//交叉轴
}

注意：

• Webkit内核的浏览器，必须加上-webkit前缀
• 元素设置成flex布局以后，子元素的float、clear和vertical-align属性将失效

详细总结：

父盒子身上：

• 决定主轴方向：

  –flex-direction:row（默认）|column|row-reverse|column-reserse;

• 换行：

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

• flex-flow:row nowrap(默认)；flex-direction和flex-wrap的简写形式

• 主轴上的对齐方式：

  justify-content: center|space-between|space-around|flex-start|flex-end

• 交叉轴上对齐方式：

  align-items:center|flex-start|flex-end|baseline|stretch

• 多根轴线的对齐方式

  align-content:center | space-between | space-around|flex-start | flex-end

子盒子身上：

• order：定义项目的排列顺序，数值越小，排列越靠前，默认为0
• flex-grow：定义项目的放大比例，默认为0，如果空间不足，项目也不放大
• flex-shrink：定义项目的缩小比例，默认为1，如果空间不足，项目将缩小
• flex-basis：定义在分配多余空间值卡，项目占据主轴空间，默认auto
• flex:0 1 auto;**flex-grow/flex-shrink/flex-basis ** 的简写
• align-self：flex-start | flex-end | center | baseline | stretch；允许单个项目有与其他项目不一样的对齐方式

flex布局教程：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html