CSS中的弹性盒子总结

一、弹性盒布局相关词汇
图中是一个 flex-direction 属性为 row的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。

1.弹性容器(Flex container)
包含着弹性项目的父元素。通过设置 display属性的值为 flex或 inline-fle来定义弹性容器。

2.弹性项目(Flex item)
弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。
3.轴(Axis)
每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。

注意：主轴与侧轴的概念
主轴就是弹性盒子子元素沿着排列的轴；与主轴垂直的轴称为侧轴。
如果你有 row 或者默认值,则主轴是水平方向，侧轴是垂直方向。
如果你有 column,则主轴是垂直方向，侧轴是水平方向。

4.方向(Direction)
弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)描述了弹性项目排布的起点与终点，可以通过属性设置方向。

5.行(Line)
根据 flex-wrap 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列