Flex布局

阮一峰    （语法）http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html    （实例）http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

1.传统布局方案依赖盒模型

display属性+position属性+float属性

2.flex布局可以应用到任意容器

display:flex display:inline-flex -webkit-flex(safari浏览器)

3.设为flex布局后，子元素float clear vertical-align属性失效

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

6个属性

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

flex-direction属性

决定主轴方向（项目排列方向）

.box{flex-direction:row    |    row-reverse    |    column    |    column-reverse}

row 水平方向 起点在左端    row-reverse    水平方向，起点在右端

column 垂直方向 起点在上端    column-reverse 垂直方向，起点在下端

flex-wrap属性

一条轴线排不下，如何换行 

.box {

    flex-wrap:    nowrap    |    wrap    |    wrap-reverse;

}

nowrap 不换行    

wrap    换行，第一行在上边

wrap-reverse    换行，第一行在下边

flex-flow

flex-direction 和 flex-wrap 的简写，默认row nowrap

.box {

    flex-flow: <flex-direction> || <flex-wrap>;

}

justify-content 属性

定义项目在主轴上的对齐方式。

.box{

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

}

flex-start    左对齐

flex-end    右对齐

center    居中

space-between    两端对齐

space-around    每个项目之间的间隔相等，所以项目之间间隔比项目和边框之间大一倍。？？？

align-items属性

项目如何在交叉轴对齐

.box {

    align-items:    flex-start    |    flex-end    |    enter    |    baseline    |    stretch;

}

align-items