Flexbox 是一种用于布局的 CSS3 模块，它可以在不使用浮动或定位的情况下，轻松地实现复杂的布局。本文将介绍 Flexbox 布局的 5 个小技巧，帮助你更好地掌握 Flexbox，并在实际开发中使用它。
技巧一：使用 flex 属性控制子元素的宽度
在 Flexbox 布局中，flex 属性用于控制子元素的宽度。它的值可以是一个数字，也可以是一个百分比。如果所有子元素的 flex 属性都为 1，则它们将平均分配容器的可用宽度。如果一个子元素的 flex 属性为 2，而其他子元素的 flex 属性为 1，则前者将占用容器可用宽度的两倍。
<div class="container"> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> <div class="item item3">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ------ - ----- -- - ------ - ----- -- - ------ - ----- -- -
在上面的示例中，.item1 和 .item3 的 flex 属性为 1，.item2 的 flex 属性为 2。因此，.item2 将占用容器可用宽度的两倍，而 .item1 和 .item3 将平均分配容器的可用宽度。
技巧二：使用 justify-content 属性控制子元素的水平排列方式
justify-content 属性用于控制子元素的水平排列方式。它的值可以是 flex-start、flex-end、center、space-between 或 space-around。默认值为 flex-start。
<div class="container"> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> <div class="item item3">Item 3</div> </div>
.container {
display: flex;
justify-content: space-between;
}在上面的示例中，.container 的 justify-content 属性为 space-between，子元素之间将平均分配容器的可用宽度，并且在子元素之间留有空白间隔。
技巧三：使用 align-items 属性控制子元素的垂直排列方式
align-items 属性用于控制子元素的垂直排列方式。它的值可以是 flex-start、flex-end、center、baseline 或 stretch。默认值为 stretch。
<div class="container"> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> <div class="item item3">Item 3</div> </div>
.container {
display: flex;
align-items: center;
}在上面的示例中，.container 的 align-items 属性为 center，子元素将在垂直方向上居中对齐。
技巧四：使用 flex-wrap 属性控制子元素的换行方式
flex-wrap 属性用于控制子元素的换行方式。它的值可以是 nowrap、wrap 或 wrap-reverse。默认值为 nowrap。
<div class="container"> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> <div class="item item3">Item 3</div> </div>
.container {
display: flex;
flex-wrap: wrap;
}在上面的示例中，.container 的 flex-wrap 属性为 wrap，子元素将在容器宽度不足时自动换行。
技巧五：使用 align-content 属性控制多行子元素的垂直排列方式
align-content 属性用于控制多行子元素的垂直排列方式。它的值可以是 flex-start、flex-end、center、space-between、space-around 或 stretch。默认值为 stretch。
<div class="container"> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> <div class="item item3">Item 3</div> <div class="item item4">Item 4</div> <div class="item item5">Item 5</div> <div class="item item6">Item 6</div> </div>
.container {
display: flex;
flex-wrap: wrap;
align-content: center;
}在上面的示例中，.container 的 align-content 属性为 center，多行子元素将在垂直方向上居中对齐。
结论
以上就是 Flexbox 布局的 5 个小技巧。掌握这些技巧，你可以更好地使用 Flexbox，并在实际开发中应用它。Flexbox 布局可以帮助你实现复杂的布局，提高开发效率。如果你还没有学习过 Flexbox，那就赶紧去学习吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67275e832e7021665e1ce282