Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性
也是很多时候我们选择 CSS 样式布局得首选方案，比较简单快捷且实用，在 Bootstrap 4 开始也开始支持弹性布局，网上也有很多的学习资源和材料
今天主要是想分享下简单的 Flex 属性的口诀，如何比较容易的记住各属性的作用是什么
五个属性分别对应的功能：
-
flex-direction：是横向还是纵向？
-
flex-wrap：要不要换行？
-
justify-content：如果 flex-direction 选择的是横向，那就是调整横向的对齐方式
-
align-items：如果 flex-direction 选择的是横向，那就是调整纵向的对齐方式
-
align-content：两行以及两行以上才生效：对所有内容块和周围空间之间的对齐方式
-
align-self：加到某个块上的对齐方式
最后三句口诀概括：
- 【前缀】与 direction 相同就是 justify，垂直就是 align
- 【后缀】与 direction 相同就是 content（align-content 除外），垂直就是 items
- 加到某个块自己上边的就是 self
