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