flex弹性盒模型布局
基本概念：flex布局元素称为Flex容器(flex container),简称容器。他的所有子元素自动称为容器成员,称为Flex项目(flex item),简称项目。
容器属性：
常用属性如下：
flex-direction（主轴方向。默认row）
flex-wrap（项目在容器轴线排不下是否换行。 默认nowrap）
flex-flow（是前两个属性的缩写。 默认值未row nowrap）
justify-content（项目在容器主轴上对齐方式。默认flex-start）
align-items（项目在交叉轴上如何对齐。默认flex-start）
align-content（多根轴线的对齐方式。默认flex-start）
下面分别概括常用属性：
1、flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向）。
常用值为：
row(默认值): 主轴水平方向,起点为左端。
row-reverse: 主轴水平方向,起点为右端。
column: 主轴垂直方向,起点为上方。
column-reverse: 主轴垂直方向,起点为下方。
例子1：（row）
例子2（column）
2、 flex-wrap属性
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
常用值为
nowrap(默认值): 不换行。
wrap: 换行,第一行在上方。
wrap-reverse: 换行,第一行在下方。
例子1（nowrap）
依然用上面的代码, 多增加几个项目p
注意：
上面布局我们可以看到, 容器为水平主轴, 项目本来是100px的宽度, 但是因为不换行（可以通过调整浏览器宽度）,
导致项目本身发生等比缩小（如果传统浮动会发生类似换行效果）。
例子2（wrap）
注意：
上面布局我们可以看到, 因为换行, 当水平方向放不下下一个项目就会发生换行, 类似浮动（第一行在上方）。
原创文章请注明转载自杭州WEB前端外包网站本文地址：http://hz.35ui.cn/post/80.html，标题：flex弹性盒模型布局