CSS：flex布局理解（*****五颗星）

Flex 是 Flexible Box的缩写，意为"弹性布局"，指定容器 display: flex 即可，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。

1.Flex容器：

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。

2.Flex项目：

它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

3.容器默认存在两根轴：

水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿水平主轴排列。

4.flex布局简单的分为：

容器属性和元素属性。

1.容器属性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content。

以下6个属性设置在容器上：

• flex-direction：决定主轴的方向（即子 item 的排列方法），row | row-reverse | column | column-reverse;
• flex-wrap：如果一条轴线排不下，如何换行，即决定换行规则，nowrap | wrap | wrap-reverse;
• flex-flow：是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap；flex-flow: <flex-direction> || <flex-wrap>;
• justify-content：定义了项目在主轴上的对齐方式，水平主轴对齐方式
• align-items：定义项目在交叉轴上如何对齐，对齐方式，竖直轴线方向
• align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

2.项目（子元素）属性：order，fle