flexbox布局

一、侧轴对齐伸缩项目——align-items

　　它充许调整伸缩项目在侧轴（也就是y轴）的对齐方式，主要包括以下几个值：

1.  flex-start/baseline：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起点的边。
2.  flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。
3.  center：伸缩项目的外边距盒在该行的侧轴上居中放置。（如果伸缩行的尺寸小于伸缩项目，则伸缩项目会向两个方向溢出相同的量）。
4.  stretch：伸缩项目拉伸，填满整个侧轴

   

   上图是align-items各个属性值运行后的效果，从上至下依次是：flex-start、center、flex-and和stretch。　　

二、主轴对齐伸缩项目——justify-content

　　这个属性主要用来设置伸缩项目沿主轴（X轴）的对齐方式，从而调整伸缩项目之间的间距；注意：设置了这个属性，在主轴方向上设置的任何margin都不会起作用。

　　主要包括的值：

1. flex-start：伸缩项目向一行的起始位置靠齐。该行的第一个伸缩项目在主轴起点边的外边距与该行在主轴起点的边对齐，同时所有后续的伸缩项目与其前一个项目对齐。
2. flex-end：伸缩项目向一行的结束位置靠齐。该行的最后一个伸缩项目在主轴终点边的外边距与该行在主轴终点的边对齐，同时所有前面的伸缩项目与其后一个项目对齐。
3. center：伸缩项目向一行的中间位置靠齐。该行的伸缩项目将相互对齐并在行中居中对齐，同时第一个项目与该行的在主轴起点的边的距离等同与最后一个项目与该行在主轴终点的边的距离（如果剩余空间是负数，则保持两端溢出的长度相等）。
4. space-between：伸缩项目会平均地分布在一行里。如果剩余空间是负数，或该行只有一个伸缩项目，则此值等效于「flex-start」。在其它情况下，第一个项目在主轴起点边的外边距会与该行在主轴起点的边对齐，同时最后一个项目在主轴终点边的外边距与该行在主轴终点的边对齐，而剩下的伸缩项目在确保两两之间的空白空间相等下平均分布。
5. space-around:伸缩项目会平均地分布在行里，两端保留一半的空间

上图是“justify-content”五种属性值的效果，从上到下依次是：flex-start、center、flex-end、space-between和space-around。

三、改变元素布局的顺序

 在Flexbox中，可以通过“order”属性来修改伸缩项目的布局顺序（在不调整结构前提之下）。默认情况之下，所有的伸缩项目的顺序组都是“0”。我们可以很容易的给每个伸缩项目设置不同的顺序值。更高的值会排在后面，而原来的HTML结构并不会有任何变化。所以在我的示例中，我将链接块设置了order值为“1”

四、align-items和flex-wrap

　　假定主轴为从左到右的水平方向，侧轴为从上到下的垂直方向

　　当flex-wrap:nowrap或wrap 时， align-items: flex-start; 也就是上方对齐

　　当flex-wrap:wrap-reverse 时， align-items: flex-start; 也就是下方对齐，是因为wrap-reverse的原因导致出现反转