在现代 Web 开发中，使用 Flexbox 布局已成为一种流行的方式。Flexbox 可以帮助我们轻松处理各种布局需求，例如：水平、垂直居中，等分多列布局等。但是，使用 Flexbox 也容易出现一些常见问题，如果不妥善处理这些问题会导致页面布局混乱、兼容性差等一系列问题。本文将介绍一些使用 Flexbox 布局时容易出现的问题和如何避免这些问题。
常见问题
1. 空隙问题
当使用 Flexbox 时，我们时常会发现一些瑕疵，例如子元素之间有奇怪的空隙。 实际上，这些空隙问题往往来自于标记元素之间的空白。 在浏览器解析 HTML 时，空白字符被视为一个空格，这意味着两个相邻的 HTML 元素之间有一个空格。 而如果你在标记元素之间留有空格，将很可能导致 Flexbox 布局出现空隙问题。
2. margin 定义
当使用 Flexbox 时，margin 定义有时会导致更多的问题。 当一个子元素有 margin 左/右时，其 margin 会叠加到父元素中。 这会导致父元素（flex container）变得比预期高，导致对齐和位置的错误。
3. 控制子元素
在 Flexbox 布局中，我们希望控制子元素的大小和间距。然而，CSS 的 box model 规则和 Flexbox 规则有时会产生一些矛盾，导致布局混乱。
如何避免问题
1. 避免空隙问题
避免空隙问题的最佳方法是使用 font-size：0，这将将所有字符的大小设为零。 此处指的是父元素（flex container）：
.parent {
font-size: 0;
display: flex;
}2. 避免 margin 定义
避免 margin 定义的最佳方法是使用 padding 代替，并将 padding 应用于相应的元素：
.parent {
display: flex;
}
.child {
padding: 20px;
}3. 控制子元素
在控制子元素方面，最好的方法是使用 Flexbox 中的 flex-shrink 和 flex-grow。 flex-grow 属性定义了元素应该增长，而 flex-shrink 定义了元素在空间不足时应该缩小。 例如，在以下示例中，元素 #two 将使用所有可用空间，而元素 #one 将使用它的默认宽度（在此为 100px）：
-- -------------------- ---- ------- ------- - -------- ----- - ---- - ------------ -- ------ ------ - ---- - ---------- -- -
结论
使用 Flexbox 可以像决定基本 HTML 结构一样重要，依靠它来取代传统的布局技术。 然而，它需要一些熟练的技巧才能掌握，以避免出现常见的问题。 在避免问题方面，需要特别注意控制子元素。 从内容布局、页面维护和扩展互操作性等方面来考虑，Flexbox 布局是十分优秀的一种方式，也越来越重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674f9bcee884a3e30f2f0cb5