css3.0 FlexBox布局

经典问题：如何垂直居中？FlexBox方案：如此简单

.container{
    display:flex; //开启 FlexBox布局
    justify-content:center; //主轴居中
    align-items：center；//交叉居中
}

核心属性

方向(Direction)

flex-direction - 定义主轴的方向，决定项目是水平排列还是垂直排列。

值：

row         - （默认）行排列 默认形式 主轴为水平轴，交叉轴为垂直轴
colume      - 列排列 主轴为垂直轴，交叉轴为水平轴

主轴对其(Justify-Content)

justify-content - 管理项目在主轴上的对齐和分布。

值：

flex-start      - （默认）向起点对齐
flex-end        - 向终点对齐
center          - 居中对齐
space-between   - 两端对齐，中间平分
space-around    - 项目两侧间距相等
space-evenly    - 所有间距完全相等

交叉轴对齐(Align Items)

align-items - 管理项目在交叉轴上的对齐方式

值：

stretch         - (默认)项目被拉伸以填满交叉轴。（前提是项目没有固定高度）
flex-start      - 向交叉轴起点对齐
flex-end        - 向交叉轴终点对齐
center          - 在交叉轴上居中

关键属性

基准宽度(flex-basis)

flex-basis - 基准宽度：空间分配的计算起点，元素的"理想"尺寸。

扩张因子(flex-grow)

flex-grow - 扩张因子：当容器有剩余空间时，决定如何"瓜分"这些空间。

收缩因子(flex-shrink)

flex-shrink - 收缩因子：当容器空间不足时，决定如何“分摊”超出的部分。

/*代码样式*/
.container {
    width:700px;
    display:flex;
}
/*容器内abc三个子项*/
.a { flex: 1 1 0;}
.b { flex: 2 1 auto;}
.c { flex: 1 1 100px;}