原文地址https://css-tricks.com/snippe...根据原文翻译加上自己的理解，如有错误请指正。灵活布局——背景Flexbox布局（FlexibleBox）模块（当前为W3CLastCallWorkingDraft）旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的尺寸未知和/或或动态（因此称为“flex”）。弹性布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序）以最好地填充可用空间（主要适应各种显示设备和屏幕尺寸）。弹性容器扩展项目以填充可用空间，或收缩项目以防止溢出。最重要的是，flexbox布局与方向无关，这与常规布局（基于垂直方向的块和基于水平方向的内联块）相反。虽然这些适用于页面，但它们缺乏灵活性（没有双关语意）来支持大型或复杂的应用程序（尤其是在涉及更改方向、调整大小、拉伸、收缩等方面时）。注意：Flexbox布局最适合应用的组件和小型布局，而网格布局最适合大型布局。基础知识和术语由于flexbox是一个完整的模块，而不是一个单一的属性。它是一个属性集合，用于设置容器和容器中的每个子项。其中一些旨在设置在容器（父元素，称为“弹性容器”）上，而另一些则旨在设置在子项目（称为“弹性项目”）上。如果常规布局基于块流和内联流，则布局基于弹性流向。请参阅规范中的这张图，解释flex布局背后的主要思想。基本上，项目将沿主轴（从主起点到主终点）或交叉轴线（从交叉起点到交叉终点）排列。横轴是垂直于主轴的轴。不叫横轴的原因|垂直轴是因为主轴不一定是水平的。有水平和垂直两种类型，而横轴始终垂直于主轴。关系。主轴：flex容器的主轴是flexitem布局的主轴，子item默认按照主轴排列。当心，它不一定是水平的；它取决于flex-direction属性flex-direction（见下文）。主要开始|main-end：主轴和容器有两个交点，一个是起点，一个是终点。判断哪个是起点主要看弹性布局的流向。例如如果是flex-direction:row;那么mainstart就是左边的主轴和容器相交的点，那么mainend就是右边的主轴和容器相交的点，灵活布局的子项都是从起点开始的到终点方向排列。mainsize：弹性容器的宽度或高度，以mainsize为准，就是容器的主尺寸。弹性项目的主要尺寸属性是“宽度”或“高度”属性，以主要尺寸为准。横轴：垂直于主轴的轴称为横轴。它的方向取决于主轴的方向。交叉启动|cross-end：横轴与容器有两个交点。如果是flex-direction:row;那么最上面的点是cross-start，最下面的点是cross-endcrosssize：弹性容器的宽度或者高度，以crosssize为标准，就是item的crosssize。交叉尺寸属性在交叉维度中是“宽度”或“高度”。容器的属性：displaydiplay定义了一个flex容器；内联或块取决于给定的值。它为所有直接子项目提供了一个弹性环境。显示：弹性；/*inline-flex*/请注意，CSS列对弹性容器没有影响。flex-direction子项在柔性布局的流向容器中的排列方式。四个值row(默认),column,row-reverse,column-reverserow:Horizo??ntalcolumn:Verticalrow-reverse:Horizo??ntalreversecolumn-reverse:Verticalreverseflex-wrap是否换行默认子项排列在一行，该属性指定是否换行，如何换行。三个值nowrap（默认）、wrap、wrap-reversenowrap：从main-start到main-end不换行不换行，容器可能会溢出wrap：换行从main-start到main-end排序的项目wrap-reverse:换行符，从main-end到main-start的行flex-flow这个属性是一个复合属性，有两个值，第一个值是flex-direction，第二个值是flex-wrap。默认是flex-flow:rownowrap;justify-contentitems在主轴（mainaxis）上对齐。取值有flex-start（默认）、flex-end、center、space-between、space-around。flex-start：主轴的起始方向对齐，即main-start方向对齐。flex-end：主轴的末端方向对齐，即main-end方向对齐。Equalspace-around：项目之间的空间是项目与容器边界（main-start，main-end）之间距离的两倍。space-evenly：项目之间的间距与项目与容器边框的距离相等。align-itemsitems在横轴上对齐。值：flex-start、flex-end、center、baseline、stretch（默认值）。flex-start：交叉起点方向对齐flex-end：交叉终点方向对齐center：交叉轴中点对齐baseline：items中第一行文本的基线stretch：默认的高度filleditems是容器的高度，与crosssize一致。但如果item有设置高度，则会按照item的高度进行处理。align-content内容对齐方式，当内容有多行（multiplelines）时在横轴上的对齐方式。对于只有一行的内容，该属性不起作用，即flex-wrap属性不能为nowrap。值：flex-start、flex-end、center、space-between、space-around、stretch。flex-start：沿交叉轴的起始方向对齐。flex-end：对齐横轴的结束方向center：对齐横轴的中点space-between：对齐两端（起点和终点）。项目之间的间距是相等的space-around：项目之间的间距是项目到边框（开始或结束）的两倍。stretch：物品占据所有空间。item的属性order定义了item的排序，值为整型数据。值越小，前面越高。默认值为0。负值是可能的。html
