Flex弹性布局页面

开发工具：DW 技术：HTML5、css
作者：陆桂超
撰写时间：2019年 1 月 19 日
下面我们使用Flex来布局下图所示的页面，如果没有使有Flex弹性布局，则很难达到换行和文字 剧中的效果。

1、类名box是最外层的一个容器，里面放置6个小的div。

2、给box设置flex，并设置flex-wrap:wrap使得box里面的6个div项目有换行的效果。

3、给box里面的div也设置flex，并设置flex-direction和align-items。flex-direction属性决定主轴方向，align-items属性定义项目在交叉轴上如何对齐。flex-direction: column; column属性值定义主轴为垂直方向，起点在上沿。align-items:center; center属性值定义项目在交叉轴上剧中对齐，这样每个div里面的图片和文字就有剧中的效果