前端开发中css3的Flex 布局详解——2

接上一篇《css3中Flex 布局详解--- 1》，今天继续；

3、flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {

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

}

4、justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {

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

}

属性介绍

HTML中表现如下：

详细表现

详细表现

5、align-items属性

align-items属性定义项目在交叉轴上如何对齐

.box {

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

}

参数详细介绍

表现形式

表现形式

6、align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {

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

}

属性的取值

属性的表现形式

属性的表现

好糟心，还是没有写完，今天就到这里吧，item的属性还没有写呢。

为了大家阅读方便，只好关注《css3中Flex 布局详解--- 3》了。

各位看官，见谅！