Flex布局

Flex容器：

首先，实现 flex 布局需要先指定一个容器，任何一个容器都可以被指定为 flex 布局，这样容器内部的元素就可以使用 flex 来进行布局。

.container {
    display: flex | inline-flex;       //可以有两种取值
}

分别生成一个块状或行内的flex容器盒子。如果使用块级元素，就可以使用flex，而如果是用的内联元素，就可以使用inline-flex。

注意：如果使用flex布局之后，子元素的float、clear、vertical-align属性将不起作用
六种属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

1、flex-direction: 决定主轴的方向(即项目的排列方向)

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

默认值：row，主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端

column：主轴为垂直方向，起点在上沿

column-reverse：主轴为垂直方向，起点在下沿

2. flex-wrap: 决定容器内项目是否可换行

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

默认值：nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。

wrap：项目主轴总尺寸超出容器时换行，第一行在上方

wrap-reverse：换行，第一行在下方

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

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

默认值: flex-start 左对齐

flex-end：右对齐

center:居中

space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。

space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。

5. align-items: 定义了项目在交叉轴上的对齐方式

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

默认值为 stretch，如果里边小盒子未设置高度或者设为 auto,容器的高度就是外边大盒子的高度

flex-start：交叉轴的起点对齐

方便看出效果，我把容器高度设置为 300px，里边小盒子高度分别为 20px, 40px, 60px, 80px, 100px。

flex-end：交叉轴的终点对齐

center：交叉轴的中点对齐

baseline: 项目的第一行文字的基线对齐

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

.container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

建立在主轴为水平方向时测试，即 flex-direction: row, flex-wrap: wrap
默认值为 stretch：

当值为 stretch 时会三条轴线平分容器的垂直方向上的空间。
我给每个盒子都设置了高度，所以它并没有撑开整个容器，如果不设置高度就像这样，撑满整个盒子。

flex-start：轴线全部在交叉轴上的起点对齐

flex-end：轴线全部在交叉轴上的终点对齐

center：轴线全部在交叉轴上的中间对齐

space-between：轴线两端对齐，之间的间隔相等，即剩余空间等分成间隙。

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