CSS3中flex布局

Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。它既可以应用于容器中，也可以应用于行业元素。

---

基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，成为Flex项目（flex item），简称“项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴控件叫做main size，占据的交叉轴控件叫做cross size。

容器属性

flex-direction　　决定主轴的方向，即项目的排列方向(默认横向排列)　

row	row-reverse	column	column-reverse	initial	inherit
默认值。灵活的项目将水平显示，正如一个行一样。	与 row 相同，但是以相反的顺序。	灵活的项目将垂直显示，正如一个列一样。	与 column 相同，但是以相反的顺序。	设置该属性为它的默认值。	从父元素继承该属性。

flex-wrap　　       容器内项目换行方式，如果一条轴线排不下，如何换行

nowrap	wrap	wrap-reverse	initial	inherit
默认值。规定灵活的项目不拆行或不拆列。	规定灵活的项目在必要的时候拆行或拆列。	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。	设置该属性为它的默认值。	从父元素继承该属性。

flex-flow　　        以上两个属性的简写方式

                              eg：display:flex;flex-flow: flex-direction flex-wrap|initial|inherit;

justify-content　 项目在主轴上的对齐方式

flex-start	flex-end	center	space-between	space-around	initial	inherit
左对齐。默认值。项目位于容器的开头	右对齐。项目位于容器的结尾	居中。项目位于容器的中心。	两端对齐，项目之间的间隔都相等。项目位于各行之间留有空白的容器内	每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。项目位于各行之前、之间、之后都留有空白的容器内	设置该属性为它的默认值。	从父元素继承该属性

align-items　　   项目在交叉轴上如何对齐

stretch	center	flex-start	flex-end	baseline	initial	inherit
如果项目未设置高度或设为auto，将占满整个容器的高度。默认值。元素被拉伸以适应容器。 如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。	交叉轴的中点对齐。元素位于容器的中心。 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。	交叉轴的起点对齐。元素位于容器的开头。 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。	交叉轴的终点对齐。元素位于容器的结尾。 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。	项目的第一行文字的基线对齐。元素位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。	设置该属性为它的默认值。	从父元素继承该属性。

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

stretch	center	flex-start	flex-end	space-between	space-around	initial	inherit
轴线占满整个交叉轴。默认值。元素被拉伸以适应容器。 各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。	与交叉轴的中点对齐。元素位于容器的中心。 各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）	与交叉轴的起点对齐。元素位于容器的开头。 各 行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。	与交叉轴的终点对齐。元素位于容器的结尾。 各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。	与交叉轴两端对齐，轴线之间的间隔平均分布。元素位于各行之间留有空白的容器内。 各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'flex-start'。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。元素位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。	设置该属性为它的默认值。	从父元素继承该属性。

以上为容器的属性，下面为容器中项目的属性：

项目属性

order　　项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow　　项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink　　项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis　　在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex　　是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self　　允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。