CSS flex 布局 - WangYu's Notebook

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

flex容器存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

容器的属性

决定了主轴的方向，可选值：

当容器内的元素的宽度或者高度之和大于容器的宽度或高度的时候，这个属性决定容器类元素是否折行，以及如何折行。

有三个值可选：

这个属性是 flex-direction 和 flex-flow 的简写形式。写法形如：flex-flow:row wrap

定义了子元素在主轴上的对齐方式，可选值为：

定义了子元素在交叉轴上的对齐方式，可选值为：

flex-start
flex-end
center
baseline:以文字的基线对齐
stretch:如果元素的高度或者宽度为 auto 将占满整个容器的高度（flex-direction:row）或者宽度（flex-direction:column）

定义了多根轴线的对齐方式，可选值为：

当存在多根轴线的时候，这个属性才生效，且设置了这个属性以后，align-items 将不起作用

定义项目的排列顺序。数值越小，排列越靠前，默认为0

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

如果一个弹性元素其宽度为200px，其中包含两个元素，两个元素的宽度都是 50px 且 flex-grow 都是 1，那么这两个元素将平分余下的 100px ，所以结果是两个元素的实际宽度都是 100px。

属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

如果一个弹性元素其宽度为200px，其中包含两个元素，两个元素的宽度都是 200px 且 flex-shrink 都是 1。因为两个元素一共超出了父元素 200px，所以这两个元素将缩小 100px ，所以结果是两个元素的实际宽度都是 100px。

如果其中一个元素的 flex-shrink 是 0 另外一个是 1，那么 flex-shrink 为 1 的元素将独自减小 200px。

取值同 width 属性，可以是具体的像素值，也可以是百分比，还可以是 auto ，默认是 auto。用于定义元素占据主轴的宽度。width 也可以描述元素的宽度，但如果同时设置了 width 和 flex-basis 那么 flex-basis 会覆盖 width 属性。

flex-grow, flex-shrink 和 flex-basis 的简写形式，写法形如：flex:1 1 auto

允许单个项目与其他项目有不同的对其方式，可以覆盖 align-items 属性。可选值如下：