CSS之——Flex（一）

Hello小伙伴们，好久不见，想必这段时间连翻的ES6让大家感觉有些烦躁，我们今天再来讲一讲CSS吧！大家听过Flex布局吗？这个可是响应式布局的利器呢~

现在我们就来讲讲Flex吧~今天主要谈谈容器：

Flex基础知识

Flex布局到底是个啥，Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何盒子都可以成为容器，但是一旦成为容器，其子元素的一些布局就丧失了作用，比如float、clear、vertical-align等属性。

我们说到了容器，容器就是装东西的，这里装的就是item，元素成为容器了，其子元素就成为item了~

定义flex布局：

容器

容器总共有6个属性：就是在我们摆放东西的时候我们会想，怎么个排放顺序，怎么个排放方向等，这里也是一样。

1）flex-direction：决定主轴的方向（即项目的排列方向）

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

分别表示：主轴为水平方向，起点在左 | 起点在右 | 主轴为垂直方向，起点在上 | 起点在下

2）flex-wrap：定义如果一条轴线排不下，如何换行

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

分别表示：不换行 | 换行，第一行在上 | 换行，第一行在下

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

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

4）justify-content：定义了项目在主轴上的对齐方式

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

分别表示：左对齐 | 右对齐 | 居中 | 两端对齐，item之间间隔相等 | 每个项目两侧间隔相等

5）align-items：定义项目在交叉轴上如何对齐

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

分别表示：交叉轴起点对齐 | 终点对齐 | 中点对齐 | item第一行文字基线对齐 | 项目未设置高度，则占满整个容器高度

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

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

}

与上个有些相似~~不过有些不同的属性：

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。