Flexbox - 对齐项目与对齐内容。
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
这篇文章最初发布在我的博客上。
Flexbox非常棒。如果你使用过现代 CSS，无论你是自己编写代码还是使用 Bootstrap 和 Foundation 等框架，你很可能都在使用 Flexbox 来进行布局和对齐。
对齐还是对齐……这是个问题
align-items很长一段时间以来，我一直试图弄清楚、align-content和之间的区别，justify-content以及它们是如何工作的，更重要的是，它们何时工作。
太长不看
- 如果你已将 设置
flex-direction为row，则justify-content作用于水平轴，align-*属性作用于垂直轴。 - 如果你已将
flex-direction属性设置为column，则align-*属性在水平轴上起作用，justify-content在垂直轴上起作用。
请参阅Anirudh Varma ( @thebigfatpanda12 ) 在CodePen上发布的Pen Align items vs Justify Content。
align-items 和 align-content 有什么区别？
align-items影响当前行上项目的对齐方式。align-content影响弹性容器内各行的对齐方式。这意味着此属性对单行容器无效。
文章的其余部分只是我试图弄明白上述问题时所学到的一切的总结。
命名法
- 弹性容器：一个元素，其
display值设置为flex。 - 弹性项目：弹性容器的直接子元素称为弹性项目。
- 主轴：由属性定义的轴
flex-direction。
——flex-direction:row这意味着弹性容器内的元素彼此相邻对齐。从技术上讲，这些元素是沿着行内轴对齐的（就像行内元素一样）。
——flex-direction:column意味着元素沿垂直轴排列，即彼此上下排列。技术上称为块轴（就像块元素一样）。
-
横轴：垂直于主轴的轴称为横轴。
-
单行容器
flex-wrap：属性设置为 的 Flex 容器nowrap。默认情况下，每个 Flex 容器都是单行容器。 -
多行容器：
flex-wrap属性设置为“多行”的 Flex 容器wrap
TL;DR（含术语）
既然我们已经了解了这些术语，就可以把TL;DR（太长不看）改写成——
justify-content主轴上的作用和align-*横轴上的作用。justify-content它们align-items的运行方式相似，区别在于，justify-content在主轴上工作，而align-items在横轴上工作。align-content仅对多行容器有效，对单行容器无效。