Flex布局(一)

网页的传统布局是基于盒子模型，依赖于display+position+float的方式完成网页布局，但是这样对于垂直居中的布局就很难实现。flex布局的浏览器支持情况如下图。

flex布局浏览器支持.jpg

Flex布局

Flex布局是弹性布局,为了使用flex布局必须设置display为flex，webkit的内核必须加上-webkit-的前缀。

.flex-container { 
    display: -webkit-flex;/* Safari */ 
    display: flex;
}

如果想让行内元素使用flex布局

.flex-container {
    display: -webkit-inline-flex; /* Safari */
    display: inline-flex;
}

容器设置flex后，所有的子元素都自动变成flex item，称为Flex项目。
注意，设为Flex布局以后，子元素的多列组中所有column-*属性、float、clear属性和vertical-align属性在Flex容器上没有作用。

Flex布局的基础知识和概念

如果常规布局是基于块和内联文本流方向，那么Flex布局就是基于“Flex-flow”方向。下图

CSS3-Flexbox-Model.jpg

main axis：flex容器的主轴
cross axis：flex容器的交叉轴
main start:主轴的开始位置
main end:主轴的结束位置
cross start:交叉轴的开始位置
cross end:交叉轴的结束位置
main size:Flex项目的在主轴方向的宽度或高度就是项目的主轴长度，Flex项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。
cross size:Flex项目的在侧轴方向的宽度或高度就是项目的侧轴长度，Flex项目的侧轴长度属性是width或height属性，由哪一个对着侧轴方向决定。