flexbox的两条轴线(axis 或 axes)
当元素被设计为一个弹性盒子，也就是元素display属性被设定为flex的时候，flexbox会根据两条轴线来进行布局
下面先对图中所出现的几个概念进行解释：
①main axis
main axis 是flexbox中的子项(flex items)进行布局方向的轴线，main axis的起点被称作main start,终点被称作 main end
main axis由元素的flex-direction属性(默认值为row)决定,flex-direction属性有以下四个可用属性值:
- row 排成一行
- row-reverse 排成一行并且顺序颠倒
- column 排成一列
- colum-reverse 排成一列并且顺序颠倒
Case1:当你选择了 row或者row-reverse属性值的时候，你的main axis会在行上，在行内方向(inline direction)。
- 属性值为row时，main start 在左侧，main end 在右侧，子元素依次从左向右排列
- 属性值为row-reverse 的时候，mian start在右侧，main end在左侧，子元素依次从右向左排列
Case2:当你选择了column或者column-reverse属性值的时候，你的main axis会从页面顶部指向页面底部，在块方向(block direction)
- 属性值为column时，main start 在上端，main end 在底端，子元素依次从上向下排列
- 属性值为row-reverse 的时候，mian start在底端，main end在上端，子元素依次从下向上排列
②cross axis
cross axis是垂直于布局方向的的轴线，也就是垂直于 main axis 的轴线,cross axis的长度默认由子项中最高的元素决定，同样地，cross axis的起点和终点被称为 cross start与cross end
cross axis垂直于main axis，所以情况与main axis相反
Case1:当你选择了 row或者row-reverse属性值的时候，你的Cross axis会在列上，在块方向(inline direction)
Case2:当你选择了 row或者row-reverse属性值的时候，你的Cross axis会在行上，在行内方向(inline direction)
③flex container与flex items
使用flexbox弹性盒子的一块区域就是flex container,将元素的display属性的属性值设置为flex 或者 inline-flex,就有了flex container,在上一节中的<section>就是一个例子,当我们把一个元素设置为 flex container的时候，它的所有直接子元素就成了flex items上一节的<article>标签就是一个例子,当我们创建了一个flex container的时候，会有一些默认值被设置给了这个flex container,这些默认值如下：
1.子项会按行显示，相当于(flex-direction的默认属性值为 row)
2.子项会从main start开始排列
3.子项不会在main方向伸展，但会收缩
4.子项会在cross axis方向伸展填充，填充尺寸由cross axis的尺寸决定(即由子项中最"高"的元素决定),这点可以从上一节两个
小例子看出，默认情况下，同一行子项会有相同的高度，因为cross方向会进行填充
5.flex-basis属性值被设置为auto
flex-basis 设置 main axis方向的初始尺寸,auto表示子项尺寸相等
6.flex-wrap 属性值被设置为 nowrap，当子元素的宽度大于父元素时，会溢出而不会换行
理解这些概念对后面flexbox属性的学习具有具有十分重要的作用，flexbox是根据两条轴线来进行居中和调整对齐的
