Flexbox

对于一些特殊的需求，比如未知容器元素的垂直居中，对齐方式，排列顺序，flexbox都可以实现。

使用方法

需要在父容器设置display属性：

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

只要该属性设置给父容器，所有的子元素都将自动成为Flex项目。

flex容器属性

flex-direction

设置flex容器的主轴方向，指定flex项目在容器中的排列方式。分别是纵向和水平。

.flex-container{ 
    -webkit-flex-direction: row; /* Chrome */ 
    flex-direction：row;
}

flex-wrap

flex项目在flex容器中默认是只显示一行。如果希望控制flex项目在flex容器中按一行或多行排列，可以使用flex-wrap属性。

.flex-container{ 
    -webkit-flex-wrap: nowrap; /* Chrome */ 
    flex-wrap: nowrap;
}

项目在容器中显示成一行，项目需要自动缩减以适应flex容器的宽度。

flex-flow

该属性是flex-direction和flex-wrap属性的简写。

.flex-container{ 
    -webkit-flex-flow:<flex-direction> || <flex-wrap>; /* Chrome */ 
    flex-flow: <flex-direction> || <flex-wrap>;
}

默认值：row nowrap

justify-content

justify-content属性用来指定flex项目在flex容器沿着主轴在当前行的对齐方式。

.flex-container{ 
    -webkit-justify-content:flex-start; /* Chrome */ 
    justify-content:flex-start;
}

可以设置的值有：flex-start、flex-end、center、space-between、space-around。

center：项目在容器中居中对齐；
space-between：项目之间平均分配空隙大小，首个和末尾与边界对齐；
space-around：各项目左右的空隙大小相同，首个和末尾不需要与边界对齐；

默认值：flex-start

align-items

Flex项目在容器侧轴对齐方式，类似于justify-content，只不过不是水平方向，而是纵向。这个属性可以设置所有flex项目对齐方式，并且包括匿名元素。

.flex-container{ 
    -webkit-align-items:stretch; /* Chrome */ 
    align-items:stretch;
}

可以设置的值有：stretch、flex-start、flex-end、center、baseline。

stretch：项目沿着容器的侧轴方向填满整个容器高度；
baseline：项目按文本基线在容器的侧轴中排列；

默认值：stretch。

align-content

该属性表示flex容器内项目在其中的侧轴排列方式，类似于jstify-content在主轴方向上的单个Flex项目对齐方式。

可以设置的值有：stretch、flex-start、flex-end、center、space-between。

注意：只有在容器内有多行项目时该属性才会生效，如果容器内只有一行项目，则属性无效。

Flex项目属性

order

该属性是设置容器内的项目排列顺序。允许使用 R，但是都必须是整数，按照属性值从小到大的顺序展示。

默认值：0

flex-grow

相当于js中的scale，将某个项目进行放大。
默认值：0；

注意：负数无效！

align-self

该属性可以指定项目自身的对齐方式或者使用align-items来执行单个flex项目。

.flex-item { 
-webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Chrome */  
align-self: auto | flex-start | flex-end | center | baseline | stretch; }

默认值：auto

Flex操作演示

Click Me：flex演示