flex 布局中的对齐属性摘抄官方解释，align-content,align-items,justify-content......

可以先看下面的链接文档：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

 

弹性盒布局相关词汇

关于弹性盒子的讨论已经从诸如水平/行内轴和垂直/块级轴这些术语中解放出来，与此同时，需要有一套新的术语来正确描述此模型。在学习下面的词汇项目时请对照下图。图中是一个 flex-direction 属性为 row的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。

弹性容器(Flex container)

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

弹性项目(Flex item)

弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。

轴(Axis)

每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。

• flex-direction 确立主轴。
• justify-content 定义了在当前行上，弹性项目沿主轴如何排布。
• align-items 定义了在当前行上，弹性项目沿侧轴默认如何排布。
• align-self 定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由 align-items 所确立的默认值。

方向(Direction)

弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由 writing-mode 确立的方向（从左到右、从右到左，等等）。

• order 属性将元素与序号关联起来，以此决定哪些元素先出现。
• flex-flow 属性是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布。

行(Line)

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

尺寸(Dimension)

根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为主轴尺寸(main size) ，对应侧轴的称为 侧轴尺寸(cross size)。

• min-height 与 min-width 属性初始值将为 0。
• flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写，描述弹性项目的整体的伸缩性。

我自己添加的文本说明，看懂上面的就不用看下面写的了。

align-items :  在侧轴的方向上设置对齐方式

align-content :  在多行的flex中在侧轴上设置总体的对齐方式见这里，在当行flex中不起作用（看这里），默认flex中不起作用（因为默认flex-wrap: nowrap 不换行）

justify-content :  在主轴上的对齐方式

content 把一堆当一个对待了。items 各自对待。（个人理解，不懂当放屁就行了）