定义Flex

1. 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2. Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

3. Flex布局允许容器有能力让其子项目改变其宽度、高度、顺序等，以最佳方式填充可用空间，适应所有类型的显示设备和屏幕大小。

4. Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小它们以防止溢出容器。因此，Flexbox布局最适合应用程序的组件和小规模的布局。

5. display: flex | inline-flex

   设置display为flex,容器被渲染为一个块级元素。

   设置display为inline-flex,容器被渲染为一个行内元素。

定义伸缩方向

flex-direction: row | row-reverse | column | column-reverse
row: 从左向右排列
row-reverse: 从右向左排列
column: 从上到下排列
column-reverse: 从下向上排列

定义行

flex-wrap: nowrap | wrap | wrap-reverse

定义对齐方式

1. 主轴对齐

   justify-content: flex-start | flex-end | center | space-between | space-around

   flex-start: 伸缩项目向一行的起始位置靠齐

   flex-end: 伸缩项目向一行的结尾位置靠齐

   center: 伸缩项目向一行的中间位置靠齐

   space-between: 伸缩项目会平均地分布在行内。第一个伸缩项目在一行的开始位置，最后一个伸缩项目在一行中终点位置。

   space-around: 伸缩项目会平均地分布在行里，两端保留一半的空间。
   

2. 侧轴对齐
   align-items: flex-start | flex-end | center | base-line| stretch

   flex-start: 伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。

   flex-end: 伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。

   center: 伸缩项目的外边距盒在该行的侧轴上居中放置。

   base-line:伸缩项目根据他们的基线对齐。

   space-around: 伸缩项目拉伸填充整个伸缩容器
   

3. align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
   align-content: flex-start | flex-end | center | space-between | space-around | stretch;