flex布局简单入门

最近看了阮一峰的flex布局教程，觉得还蛮好用的，如果以后在现代浏览器普及的情况下，可能用这个flex布局就可以更好的解决响应式网站的布局方案了，而且在现在的移动端很多都已经开始使用flex布局来进行开发了，所以我觉得学flex布局是很有必要的。

基本概念：

和坐标系相似的概念，横着的为主轴，纵向的为交叉轴，其中主轴(main axis)的默认方向为从左到右，交叉轴(cross axis)方向为从上到下。其中子元素的宽度就是 main-size 高度就是 cross-size。

flex布局需要两种元素，第一种称为容器，它的主要功能就是用来包裹一些定位的子元素，来完成我们的flex布局。
怎么样让一个元素作为我们的flex容易呢？

这个属性决定了主轴的方向：

flex-direction: row | row-reverse | column | column-reverse;

主轴改变的话交叉轴也会跟着改变。

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿

这个属性就好比是word-wrap一样，默认情况下word-wrap是不会自动换行的，那么flex-wrap也是一样，为了让它能在子元素占满一行时自动换到下一行，就必须要设置flex-wrap:

flex-wrap: nowrap | wrap | wrap-reverse;

各值意思为：

nowrap ： 默认值，不换行
wrap ： 换行
wrap-reverse : 换行，但第一行在下面，向上叠加

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

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

这个属性设置主轴方向的对齐方式；

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

flex-start： 默认值，左对齐
flex-end：右对齐
center： 居中
space-between：将剩余空间平均分配给项目之间的间隔。
space-around：将剩余空间平均分配给项目的左右间隔。

设置交叉轴方向的对其方式：

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

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

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

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

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：将剩余空间平均分配给项目之间的间隔。
space-around：将剩余空间平均分配给项目的上下间隔。
stretch（默认值）：轴线占满整个交叉轴。