justify/align-content/items使用区别

前言

在弹性盒子中常常将justify-content和align-items两个属性定义为center来使元素居中。而justify-items和align-content两个属性使用常常会令人混淆，本文就这四个属性展开分析。

---

justify-content 和 align-content

分配主轴/次轴方向元素之间的空间，以center为例，直接上图理解。

---

justify-items 和 align-items

---

总结：

在弹性布局中，这四个属性设置为center产生的效果如下：

justify-content: 在单行和多行中都是在主轴方向上整体居中；

justify-items：在弹性布局中没有效果，该属性会被忽略。

align-content: 只在多行情况下有效，多行元素会整体居中。

align-items: 单行和多行都是在所在行中居中，这里区别下整体居中（align-content）。

单行：justify-content 主轴居中，align-items 次轴居中

多行：justify-content 主轴居中， align-content 次轴整体居中, align-items 各行内居中

justify对应主轴，align对应次轴。content对应的是整体，items对应的是每个元素所在的那个周边区域。

通过尝试所得，欢迎各位大佬指正~