CSS Flexbox弹性布局

flexbox是web布局的主流方式之一。

如何声明flexbox:

在父元素中设置display：flex 或者 display:inline-flex。这样就可以开始使用felxbox模块了，实际显示声明了flex容器之后，一个felxbox格式化上下文就立即启动了。

一旦你显示的设置了display:flex;父元素就会自动变成flex容器，而他的子元素就变成了flex项目;

Flex容器：父元素显示设置了display:felx;

1,flex-direction：控制flex项目沿着主轴（main axis）的排列方向，有四个值：row、column、row-reverse、column-reverse，它可以是行（水平），列（垂直）或者行和列的反向。（水平和垂直在flex的世界里不是什么方向，他们被称为主轴（main-axis）和侧轴(cross-axis）;

2,flex-wrap:flex容器会在一行内容纳多有的flex项目,因为默认值是nowarp。有三个属性值：wrap、nowrap、wrap-reverse;(换行，不换行，反向多行排列)

3，flex-flow：flex-flow是flex-direction和flex-wrap两个属性的速记属性，跟border的速记写法一样，这里概念是相同的，多个值写在一行。例如：flex-flow：row wrap; flex-flow：colum wrap;  flex-flow：row nowrap; 等等

4，justify-content：主要定义felx项目在main-axis上的对齐方式，有五个值：flex-start、flex-end、center、space-between、space-around；（左对齐，右对，居中对齐，两端对齐，让每个项目具有相同的空间）

5，align-items：主要定义felx项目在cross-axis上的对齐方式，有五个值：flex-start、flex-end、center、stretch、baseline;（顶部对齐，底部对齐，居中对齐，让所有的flex项目的高度等于flex容器的高度；，基线对齐）

align-items的默认值是stretch。让所有的flex项目的高度等于flex容器的高度；

6，align-content：主要用于多行的flex容器，用来控制flex项目在flex容器里的排列方式。有五个值：flex-start、flex-end、center、stretch;

align-content的默认值是stretch。会拉伸flex项目让他们沿着cross-axis适应felx容器可用空间。

flex-start：这次是让多行Flex项目靠Cross-Axis开始位置从上往下排列，顶部对齐。

flex-end：让多行Flex项目靠着Cross-Axis结束位置。让Flex项目沿着Cross-Axis从下到上排列，即底部对齐。

center：让多行Flex项目在Cross-Axis中间。在Flex容器中居中对齐。

Flex项目：felx容器内的子元素

flex项目属性：

1，order：允许flex项目在一个flex容器中重新排序。基本上你可以改变felx项目的顺序，从一个位置移动到另一个位置。

order属性的默认值是0，可以接受正值或负值。felx项目会根据order值重新排序，从低到高。

2，flex-grow：控制flex项目在容器有多余空间时如何放大，接受0或大于0的任何正整数，默认值是0表示flex项目不会增长，flex-grow开关是关闭的

3，flex-shrink;控制flex项目在容器没有多余空间时如何缩小，接受0或大于0的任何正整数，默认值是1表示，flex-shrink开关是开的；

4，flex-basis：可以指定Flex项目的初始大小

flex速记

flex：flex-grow flex-shink flex-basis