CSS 弹性盒子 Flexbox 布局
Flexbox（弹性盒子）是 CSS3 中引入的一种弱小且兼容性好的布局办法。应用 flexbox，能够很容易地解决好页面上的元素布局，并创立能够主动放大和放大的动静用户界面。
flex 盒子模式
只有在一个元素的 CSS 中增加 display: flex;，就能够应用其它 flex 属性来构建响应式页面了。
#box-container { display: flex;}行，列 Row Culomn
给元素增加 display: flex 属性能够让它变成 flex 容器， 而后能够让元素的我的项目排列成行或列。 只有给父元素增加 flex-direction 属性，并把属性值设置为 row 或 column，即可横向排列或纵向排列它的所有子元素。 创立一行将使子项程度对齐，创立一列将使子项垂直对齐。
flex-direction 的其余可选值还有 row-reverse 和 column-reverse。
留神： flex-direction 的默认值为 row。
#box-container { display: flex; flex-direction: row; /* flex-direction: column */}父元素对齐 Align
子元素排列的方向被称为 main axis（主轴）。 对于行，主轴程度贯通每一个我的项目； 对于列，主轴垂直贯通每一个我的项目。
对于如何沿主轴线排放 flex 我的项目，有几种抉择。 很罕用的一种是 justify-content: center;：即 flex 子元素在 flex 容器中居中排列。 其余抉择包含：
flex-start：从 flex 容器的起始地位开始排列我的项目。 对行来说是把我的项目移至右边， 对于列是把我的项目移至顶部。 如未设置justify-content的值，那么这就是默认值。flex-end：从 flex 容器的终止地位开始排列我的项目。 对行来说是把我的项目移至左边， 对于列是把我的项目移至底部。space-between：我的项目间保留肯定间距地沿主轴居中排列。 第一个和最初一个我的项目被搁置在容器边际。 例如，在行中第一个我的项目会紧贴着容器右边，最初一个我的项目会紧贴着容器左边，而后其余我的项目平均排布。space-around：与space-between类似，但头尾两个我的项目不会紧贴容器边缘，所有我的项目之间的空间平均排布。space-evenly：头尾两个我的项目不会紧贴容器边缘，所有我的项目之间的空间平均排布。
#box-container { justify-content: center;}Flex 容器中，与主轴垂直的叫做 cross axis（穿插轴）。 行的穿插轴是垂直的，列的穿插轴是程度的。
CSS 中的 align-items 属性用来定义 flex 子元素沿穿插轴的对齐形式。 对行来说，定义的是元素的高低对齐形式； 对列来说，是定义元素的左右对齐形式。
align-items 的可选值包含：
flex-start：从 flex 容器的起始地位开始对齐我的项目。 对行来说，把我的项目移至容器顶部； 对列来说，是把我的项目移至容器右边。flex-end：从 flex 容器的终止地位开始对齐我的项目。 对行来说，把我的项目移至容器底部； 对列来说，把我的项目移至容器左边。center：把我的项目居中搁置。 对行来说，垂直居中（我的项目间隔顶部和底部的间隔相等）； 对列来说，程度居中（我的项目间隔右边和左边的间隔相等）。stretch：拉伸我的项目，填满 flex 容器。 例如，排成行的我的项目从容器顶部拉伸到底部。 如未设置align-items的值，那么这就是默认值。baseline：沿基线对齐。 基线是文本相干的概念，能够认为它是字母排列的下端基准线。
#box-container { align-items: center;}换行 Wrap
CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的个性。
默认状况下，flex 容器会调整我的项目大小，把它们都塞到一起。 对于行来说，所有我的项目都会在一条直线上。
不过，应用 flex-wrap 属性能够使我的项目换行展现。 这意味着多进去的子元素会被移到新的行或列。 换行产生的断点由子元素和容器的大小决定。
换行方向的可选值有这些：
nowrap：默认值，不换行。wrap：如果排列以行为基准，就将行从上往下排列；如果排列以列为基准，就将列从左往右排列。wrap-reverse：如果排列以行为基准，就将行从下往上排列；如果排列以列为基准，就将列从右往左排列。
#box-container { flex-wrap: wrap;}膨胀 Shrink
下面提到的属性都是利用于 flex 容器（flex 子元素的父元素）的。 除此之外，flex 子元素也有很多实用属性。
首先介绍的是 flex-shrink 属性。 应用之后，如果 flex 容器太小，则子元素会主动放大。 当容器的宽度小于外面所有子元素的宽度之和时，所有子元素都会主动压缩。
子元素的 flex-shrink 承受数值作为属性值。 数值越大，则该元素与其余元素相比会被压缩得更厉害。 比方，一个我的项目的 flex-shrink 属性值为 1，另一个我的项目的 flex-shrink 属性值为 3，那么后者相比前者会受到 3 倍压缩。
#box-1 { flex-shrink: 1;}#box-2 { flex-shrink: 2;}扩充 Grow
与 flex-shrink 绝对的是 flex-grow。flex-grow会在容器太大时对子元素作出调整。
如果一个我的项目的 flex-grow 属性值为 1，另一个我的项目的 flex-grow 属性值为 3，那么值为 3 的一个会较另一个扩充 3 倍。
#box-1 { flex-grow: 1;}#box-2 { flex-grow: 2;}初始大小 Basis
flex-basis 属性定义了在应用 CSS 的 flex-shrink 或 flex-grow 属性对元素进行调整前，元素的初始大小。
flex-basis 属性的单位与其余示意尺寸的属性的单位统一（px、em、% 等）。 如果值为 auto，则我的项目的尺寸随内容调整。
#box-1 { flex-basis: 10em;}#box-2 { flex-basis: 20em;}简写 Shorthand
下面几个 flex 属性有一个简写形式。 flex-grow、flex-shrink和 flex-basis 属性能够在 flex中一并设置。
例如，flex: 1 0 10px; 会把我的项目属性设为 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;。
属性的默认设置是 flex: 0 1 auto;。
#box-1 { flex: 2 2 150px;}#box-2 { flex: 1 1 150px;}重新排列 Rearrange
order 属性通知 CSS flex 容器里子元素的程序。 默认状况下，我的项目排列程序与源 HTML 文件中程序雷同。 这个属性承受数字作为参数，能够应用正数。
#box-1 { order: 2;}#box-2 { order: 1;}子元素对齐形式 Align
align-self。 这个属性容许调整单个子元素本人的对齐形式，而不会影响到全副子元素。 因为 float、clear 和 vertical-align 等调整对齐形式的属性都不能利用于 flex 子元素，所以这个属性显得非常有用。
align-self 可设置的值与 align-items 的一样，并且它会笼罩 align-items 所设置的值。
#box-1 { align-self: center;}#box-2 { align-self: flex-end;}