目录#
介绍#
Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。 —– MDN
Flexbox布局提供了一种更为高效的方式，用于布局、对齐、以及分配与控制容器内元素间空隙，即使它们的大小仍是未知或是动态的。 — Guide to Flexbox
轴#
Flex布局中，存在着两根轴线，即主轴与交叉轴（可以理解为副轴），两者呈垂直并交集于一点，此点应为flex容器（container）的起始像素坐标；
主轴交叉轴相比于我们常见的 X轴Y轴 有相似之处又有所不同，其中，主轴可以是X轴，也可以是Y轴；同理，交叉轴在主轴为X轴方向时，作为Y轴，在主轴为Y轴方向时，作为X轴；二者相垂直即为基本条件；
对于轴呈现为X轴方向或是Y轴方向的配置，使用 flex-direction 来定义，有四个参数可设定：
row(默认)row-reversecolumncolumn-reverse
row 指定了主轴是沿着X轴方向延伸的，即容器内部的元素是按照从左向右（X轴的延伸方向）；
column 则指定主轴是沿着Y轴方向延伸的，即容器内部的元素是按照从上到下（Y轴的延伸方向）；
而加上 reverse 则就是顾名思义，在原来的基础上，反向排列；
贴上一张图来辅助理解：
待续啊…