flex布局的基本概念

flex box是一种一维的布局模型，给他的子元素提供了强大的空间分布和对齐能力。

我们说 flexbox 是一维的模型，因为它每次只能处理 行模式 或者 列模式。和它对应的是Grid Layout，可以同时处理行和列的布局。

flexbox有两根轴线，分为主轴和交叉轴。

主轴

主轴通过 flex-direction来设置，它的取值可能是：

• row – x轴为主轴，也是浏览器的默认值，水平从左至右排列
• row-reverse – x轴为主轴，水平从右至左排列
• column – y轴为主轴，是很多移动应用框架的默认值，如RN。垂直从上至下排列
• column-reverse – y轴为主轴，垂直从下至上排列

交叉轴

与主轴垂直交叉的另一根轴线。理解了主轴和交叉轴的概念对后续的排列和对齐非常有用。

起始线和终止线

轴和轴的方向都是不固定的，单纯使用上下左右来描述就不太好理解了，这就引出了轴的起始线和终止线，默认情况是这样的：

flex box是一种一维的布局模型，给他的子元素提供了强大的空间分布和对齐能力。
我们说 flexbox 是一维的模型，因为它每次只能处理 行模式 或者 列模式。和它对应的是Grid Layout，可以同时处理行和列的布局。
flexbox局部模型，有两根轴线，分为主轴和交叉轴。

主轴

主轴通过 flex-direction来设置，它的取值可能是：

• row – x轴为主轴，也是浏览器的默认值，水平从左至右排列
• row-reverse – x轴为主轴，水平从右至左排列
• column – y轴