前言
CSS Flexbox 是用于布局的一种模块，可以更方便地实现各种布局方式。然而在使用过程中，我们可能会遇到一些坑和一些技巧，本文将总结一些常见的问题和技巧，以期帮助读者更好地使用 Flexbox。
常见问题
1. 子元素没有完全覆盖父元素
在使用 Flexbox 时，如果希望子元素完全覆盖父元素，可能会遇到下面的情况：
<div class="parent"> <div class="child"></div> </div>
-- -------------------- ---- ------- ------- - -------- ----- ---------------- ------- ------------ ------- - ------ - ------ ----- ------- ----- -展开代码
上面的代码会发现子元素没有完全覆盖父元素，这是因为 Flexbox 的默认行为是不让子元素超出父元素，可以通过在父元素上设置 overflow: hidden; 来解决这个问题。
-- -------------------- ---- ------- ------- - -------- ----- ---------------- ------- ------------ ------- --------- ------- - ------ - ------ ----- ------- ----- -展开代码
2. justify-content 和 align-items 不起作用
有时候我们设置了 justify-content 和 align-items，但是并没有产生效果，这时候可能是因为没有给父元素设置高度，可以通过设置 height: 100%; 或 min-height: 0; 来解决。
-- -------------------- ---- ------- ------- - -------- ----- ---------------- ------- ------------ ------- ------- ----- - ------ - ------ ----- ------- ----- -展开代码
或者：
-- -------------------- ---- ------- ------- - -------- ----- ---------------- ------- ------------ ------- ----------- -- - ------ - ------ ----- ------- ----- -展开代码
3. 子元素超出父元素
在 Flexbox 中，可以通过 flex-basis、flex-grow 和 flex-shrink 来决定子元素的宽度或高度。然而，这也会导致子元素超出父元素，可以通过设置 box-sizing: border-box; 来解决。
-- -------------------- ---- ------- ------- - -------- ----- ---------------- ------- ------------ ------- - ------ - ----------- ----- ---------- -- ------------ -- ----------- ----------- -展开代码
技巧总结
1. 使用 Flexbox 布局中嵌套 Grid 布局
Flexbox 和 Grid 都是用于布局的方式，它们各有优劣，有时候我们希望同时使用它们，可以将 Grid 布局嵌套在 Flexbox 中，这样可以更方便地实现一些复杂的布局。
<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>
-- -------------------- ---- ------- ------- - -------- ----- ---------------- ------- ------------ ------- - ------ - ----------- ---- ---------- -- ------------ -- ------- ------ ------- ----- - ------------------- - -------- ----- ---------------------- --------- ----- ---- ----- - ------------------- ---------- - ----------------- -------- -展开代码
2. 使用 Flexbox 布局实现水平垂直居中
水平垂直居中是常见的布局需求，可以将父元素设置为 Flexbox 布局，然后将子元素设置为 margin: auto;，这样子元素就可以实现水平垂直居中了。
<div class="parent"> <div class="child"></div> </div>
-- -------------------- ---- ------- ------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ - ------ - ------ ------ ------- ------ ----------------- -------- ------- ----- -展开代码
3. 使用 Flexbox 布局实现等分布局
等分布局是常见的布局需求，可以通过将父元素设置为 Flexbox 布局，然后将子元素的 flex-basis、flex-grow 和 flex-shrink 设置为相同的值，这样就可以实现等分布局了。
<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>
-- -------------------- ---- ------- ------- - -------- ----- - ------ - ----------- -- ---------- -- ------------ -- ------- ------ ----------------- -------- ------- ----- -展开代码
总结
Flexbox 是一种强大的布局方式，虽然在使用过程中会遇到一些坑，但只要掌握了一些技巧，就可以更方便地实现各种布局方式。希望本文的总结能给大家带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6495979548841e98942b6652
