Flexbox 是 flexible box 的简称，意思是“灵活的盒子容器”，是 CSS3 引入的新的构造模式。它决定了元素如安在页面上摆列，使它们能在差此外屏幕尺寸和设备下可预测地展现出来。
它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前构造方法(如 table 结谈判浮动元素内嵌块元素)对比，Flexbox 是一个更强大的方法：
在差别标的目的摆列元素
从头摆列元素的显示挨次
变动元素的对齐方法
动态地将元素装入容器
什么情况下不建议使用 Flexbox ?
虽然 Flexbox 非常适合缩放，对齐和从头排序元素，但以下情况应该尽量制止使用 Flexbox 构造：
整体页面构造
完全撑持旧浏览器的网站
浏览器撑持 Flexbox 的情况：
旧版浏览器，如IE 11或更低版本，不撑持或仅部分撑持 Flexbox 。如果你想安适的使用页面正常泛起，你应该退回到其他的 CSS 构造方法，好比结合float 的 display: inline-block 或者 display: table 等。但是，如果您只针对现代浏览器，那么 Flexbox 绝对值得一试。
术语
在 Flexbox 模型中，有三个核心观点：
– flex 项，需要构造的元素
– flex 容器，其包罗 flex 项
– 摆列标的目的(direction)，这决定了 flex 项的构造标的目的
最好的学习方法是从经验和例子中学习，所以让我们开始吧!
Level 1?—?根本
1)创建一个 flex 容器
要创建一个 flex 容器，您只需要将一个 display: flex 属性添加到一个元素上。默认情况下，所有的直接子元素都被认为是 flex 项，并从左到右依次摆列在一行中。如果 flex 项的宽度总和大于容器，那么 flex 项将按比例缩小，直到它们适应 flex 容器宽度。
2)将 flex 项排成一列
可以通过(在 flex 容器中)设置 flex-direction: column 使 flex 项垂直构造。也可以通过设置 flex-direction: column-reverse 或 flex-direction: row-reverse 来使 flex 项以相反的挨次摆列。
Level 2—?新手
1)靠右对齐的 flex 项
回想一下，每个 Flexbox 模型都有 flex 标的目的(主轴)。justify-content 用于指定 flex 项在 flex 标的目的(direction)上的对齐位置。在上面的例子中，justify-content:flex-end 暗示 flex 项在程度标的目的上靠 flex 容器的末端对齐。这就是为什么他们被放在了右边。
2)居中对齐的 flex 项
3)铺开的 flex 项
您可以通过使用以下 justify-content 属性的三个间距值之一来指定容器中 flex 项之间应显示几多空间：
space-evenly : flex 容器起始边沿和第一个 flex 项之间的间距和每个相邻 flex 项之间的间距是相等。(作者注：该属性以前很少看到，原因是以前浏览器不撑持，chrome 也是 60 版本之后才撑持。延伸一下，align-content: space-evenly 也是这个逻辑，建议在 chrome 60 下检察 这个demo 。 )
space-between : 任何两个相邻 flex 项之间的间距是不异的，但不必然即是第一个/最后一个 flex 项与 flex 容器边沿之间的间距;起始边沿和第一个项目之间的间距和末端边沿和最后一个项目之间的间距是相等的。
space-around : flex 容器中的每个 flex 项的每一侧间距都是相等的。请注意，这意味着两个相邻 flex 项之间的空间将是第一个/最后一个 flex 项与其比来边沿之间的空间的两倍。
作者注：网上找了一张图片能更好的解释 justify-content 属性值的表示，如图：
4)flex 项在交叉轴上的对齐
凡是，我们想沿着 flex 标的目的(主轴)摆列 flex 项，还可以在垂直于它的标的目的(交叉轴)上对齐 flex 项。通过设置 justify-content:center和align-items:center，可以使 flex 项水安然安祥垂直安排在 flex 容器的中心。
5)对齐某个特定的 flex 项
可以在某个特定的 flex 项上使用 align-self CSS 属性，来使该特定的 flex 项与容器中的其他 flex 项进行对齐。
Level 3?—?中级
1)允许 flex 项多行/列摆列
默认情况下， flex 项不允许多行/列摆列，如果 flex 容器尺寸对付所有 flex 项来说不够大，那么flex 项将被调解巨细以适应单行或列摆列。
通过添加 flex-wrap: wrap ，可以将溢出容器的 flex 项将被摆列到另一行/列中。
2)flex 项反向多行/列摆列
flex-wrap:wrap-reverse 仍然使 flex 项以多行/列摆列，但是它们从 flex 容器的末尾开始摆列的。
3)多行/列摆列的 flex 项在交叉轴上的对齐方法
默认情况下，当 flex 容器的交叉轴(cross axis)上存在多余空间时，您可以在 flex 容器上设置 align-content，以控制 flex 项在交叉轴(cross axis)上的对齐方法。可能的值是 flex-start，flex-end，，center，space-between，space-around ，space-evenly 和 stretch(默认)。
Level 4?—?高级
1)拉伸 flex 项