Flex 弹性布局一——flex 容器及设置在容器上的属性

CSS 弹性盒子布局定义了一种针对用户界面设计而优化的 CSS 盒子模型。

在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免从父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。

在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，但是可以更改，所以不能一概认为宽度就是主轴，垂直就是侧轴，需要根据 flex-direction 来判断。 在 flex 容器中的每个子元素被称为 flex item 占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。 如下图：

一、flex 容器

实现 flex 布局首先指定一个容器。

.container {
    display: flex; //块级盒子
}
.container {
    display: inline-flex; //行内盒子
}

注意： 容器设置 flex 布局后，子元素的 float 、clear 、vertical-align 属性将会失效。 

---

二、设置在容器上的属性

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. 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: no-wrap | wrap | wrap-reverse;
}

属性值	描述
no-wrap (默认值)	默认不换行，即当主轴尺寸固定时，若空间不足时，元素尺寸会随之调整(缩小)，并不会挤到下一行。
wrap	正常换行
wrap-reverse	换行，第一行在下方

3、flex-flow:  flex-direction 和 flex-wrap 的简写形式

.container {
    flex-flow: <flex-direction> || <flex-wrap>;
}
默认值为: row nowrap

4、justify-content: 定义了子元素在主轴上的对齐方式

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

属性值	描述
flex-start	子元素起始位置与 main start 位置对齐
flex-end	子元素末尾位置与 main end 位置对齐
center	在主轴方向居中于容器
space-between	两端对齐，元素之间的间隔相等，即剩余空间等分成间隙
space-around	每个元素两侧的间隔相等，所以元素之间的间隔比元素与边缘的间隔大一倍

5、align-items: 定义了子元素在交叉轴上的对齐方式

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

属性值	描述
flex-start	子元素起始位置与 cross start 位置对齐
flex-end	子元素末尾位置与 cross end 位置对齐
center	在交叉轴方向居中于容器
baseline	第一行文字的基线对齐
stretch(默认)	高度未定(或 auto)时, 将占满容器的高度

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

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

当 flex-wrap 设置为 nowrap 的时候，容器仅存在一根轴线，因为元素不会换行，就不会产生多条轴线。

当 flex-wrap 设置为 wrap 的时候，容器可能会出现多条轴线，这时候就需要去设置多条轴线之间的对齐方式了。

属性值	描述
flex-start	顶部与 cross start 位置对齐
flex-end	底部与 cross end 位置对齐
center	在交叉轴方向居中于容器
space-between	与交叉轴两端对齐, 间隔全部相等
space-around	每个轴线两侧的间隔相等，所以轴线之间的间隔是轴线与边缘间隔的2倍
stretch	多根主轴上的子元素充满交叉轴

---

转下文： 

Flex弹性布局二——设置在 flex item 上的属性