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