CSS Flex布局

flex布局的基本概念

Flexible Box模型，通常被称为flexbox，是一种一维的布局模型。它给flexbox的子元素之间提供了强大的空间分布和对齐能力。

flexbox的两根轴线

flex布局的所有属性都跟两根轴线有关，主轴和交叉轴，主轴由flex-direction定义，交叉轴垂直于主轴。

主轴

主轴由flex-direction定义，可以取4个值：
- row
- row-reverse
- column
- column-reverse
row和row-reverse，主轴则为水平方向，flexbox的子元素将按水平方向排列。

column和column-reverse，主轴为垂直方向，flexbox的子元素将按照垂直方向排列。
交叉轴

交叉轴垂直于主轴，所以主轴设置为row和row-reverse，交叉轴就是垂直方向的，反之亦然。

flex容器

文档中使用了flexbox的区域就叫做flex容器，我们可以将一个容器的display设置为flex来将其变为flexbox，之后，这个容器中所有的直系元素都会变为flex元素。 flex 容器中的所有 flex 元素都会有下列行为：

元素排列为一行 (flex-direction 属性的初始值是 row)。
元素从主轴的起始线开始。
元素不会在主维度方向拉伸，但是可以缩小。
元素被拉伸来填充交叉轴大小。
flex-basis 属性为 auto。
flex-wrap 属性为 nowrap。

flex-direction（初始值为row）：在 flex 容器中添加 flex-direction 属性可以让我们更改 flex 元素的排列方向。设置 flex-direction: row-reverse 可以让元素沿着行的方向显示，但是起始线和终止线位置会交换。

flex-wrap（默认值为no-wrap）：flexbox是一维模型，但是我们可以将其应用到多行中，在这样做时，应该将每一行看作一个新的flex容器，任何空间分布都将在该行上发生，而不影响该空间分布的其他行。flex-wrap就是实现多行效果的参数，它指定了flex元素单行显示（no-wrap）还是多行显示（wrap和wrap-reverse），如果是单行显示，那么在子元素超出容器时，首先会进行缩小，如果子元素无法缩小，那么子元素会溢出容器；而如果设置为多行显示，当子元素无法全部显示在一行，则会换行显示

简写属性 flex-flow

我们可以将两个属性flex-direction和flex-wrap组合为间歇属性flex-flow，例如：
```
.box {
 display: flex;
 flex-flow: row wrap;
}
```
align-items（默认值是stretch）：

align-items 属性可以使元素在交叉轴方向对齐。常见取值：

stretch：弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
flex-start：使flex元素按flex顶部对齐。
flex-end：使flex元素按flex底部对齐。
center：使flex元素居中对齐。

justify-content：

justify-content属性用来使元素在主轴方向上对齐初始值是flex-start，元素从起始线开始排列（比如，flex-direction: row；起始线就是左边，flex元素就会从左至右依次排列）；flex-end则是从终止线开始排列；center是在中间排列；space-around是将排列之后的空间均匀的分布在元素左右两边；space-between是将排列之后的空间均匀分布在元素之间。

flex元素上的属性

flex-basis：

flex-basis定义了该元素的空间大小，默认值为auto，浏览器会检测这个元素是否具有确定的尺寸，如果没有给元素设定尺寸，flex-basis的值采用元素内容的尺寸。
flex-grow：

flex-grow 若被赋值为一个正整数， flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。

flex-grow 属性可以按比例分配空间。如果第一个元素 flex-grow 值为2，其他元素值为1，则第一个元素将占有2/4, 另外两个元素各占有1/4。
flex-shrink：

flex-grow属性是处理flex元素在主轴上增加空间的问题，相反flex-shrink属性是处理flex元素收缩的问题。如果我们的容器中没有足够排列flex元素的空间，那么可以把flex元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。
flex属性的简写：

flex践行形式允许把三个数值按flex-grow、flex-shrink、flex-basis顺序书写。

大多数情况下可以用预定义的简写形式。在这个教程中你可能经常会看到这种写法，许多情况下你都可以这么使用。下面是几种预定义的值：
- flex: initial
- flex: auto
- flex: none
- flex: <positive-number>
flex: initial 是把flex元素重置为Flexbox的初始值，它相当于 flex: 0 1 auto。在这里 flex-grow 的值为0，所以flex元素不会超过它们 flex-basis 的尺寸。flex-shrink 的值为1, 所以可以缩小flex元素来防止它们溢出。flex-basis 的值为 auto. Flex元素尺寸可以是在主维度上设置的，也可以是根据内容自动得到的。

flex: auto 等同于 flex: 1 1 auto；和上面的 flex:initial 基本相同，但是这种情况下，flex元素在需要的时候既可以拉伸也可以收缩。

flex: none 可以把flex元素设置为不可伸缩。它和设置为 flex: 0 0 auto 是一样的。元素既不能拉伸或者收缩，但是元素会按具有 flex-basis: auto 属性的flexbox进行布局。

你在教程中常看到的 flex: 1 或者 flex: 2 等等。它相当于flex: 1 1 0。元素可以在flex-basis为0的基础上伸缩。
order
order属性定义项目的排列顺序，数值越小，排列越靠前
align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。