在前端开发中，经常会使用到弹性盒子布局（Flexbox），其中 flex-wrap 和 align-* 属性是非常常用的。在掌握这些属性的基础上，了解它们之间的关系可以更好地理解和使用弹性盒子布局。
flex-wrap
flex-wrap 属性用于控制弹性容器中的元素是否允许换行，默认值为 nowrap，即不换行。如果设置为 wrap，则当弹性容器空间不足时，元素会自动换行到下一行。
---------- - -------- ----- ---------- ----- -- ---- -- -
align-self
align-self 属性用于单独控制某个弹性元素在交叉轴上的对齐方式。默认情况下，所有元素都遵循弹性容器上的 align-items 属性。但是，如果希望单独控制某个元素的对齐方式，可以使用 align-self。
----- - ----------- ------- -- ------------------ -- -
align-items
align-items 属性用于控制弹性容器中所有元素在交叉轴上的对齐方式。默认情况下，所有元素都会在交叉轴上居中对齐。
---------- - -------- ----- ------------ ------- -- ----------- -- -
align-content
align-content 属性用于控制多行弹性容器在交叉轴上的对齐方式。它与 align-items 属性非常相似，但是只对多行容器有效。
---------- - -------- ----- ---------- ----- -------------- ------- -- ------------- -- -
总结
flex-wrap控制弹性容器中的元素是否允许换行。align-self控制单个弹性元素在交叉轴上的对齐方式。align-items控制所有弹性元素在交叉轴上的对齐方式。align-content控制多行弹性容器在交叉轴上的对齐方式。
以上这些属性可以组合使用，以达到不同的布局效果。
示例代码：
---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------
---------- - -------- ----- ---------- ----- -------------- ------- - ----- - ------ ------ ------- ------ ----------------- ----- ------- ----- -
以上代码可以将容器中的元素自动换行，并在交叉轴上居中对齐。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/33773