CSS Flexbox 布局是一个非常强大的工具，能够帮助我们轻松地实现各种各样的页面布局。然而，有时候我们需要在 Flexbox 布局中给子元素添加边框或者背景样式，这时候有一些需要注意的细节。
为什么在 Flexbox 布局中实现子元素的边框和背景样式有难度
在传统的盒子模型中，我们可以轻松地给一个盒子添加边框和背景样式，如下所示：
.box {
border: 1px solid black;
background-color: #f5f5f5;
}然而，在 Flexbox 布局中，子元素的大小和位置都是由 Flexbox 容器来控制的，子元素自身的大小和位置取决于 Flexbox 容器的属性以及其他子元素的大小和位置，这会导致一些难以预料的行为。例如，给子元素添加边框可能会影响子元素的大小和位置，使得布局出现异常。类似地，添加背景样式也可能会影响子元素的大小和位置，进而影响整个布局。
如何在 Flexbox 布局中实现子元素的边框和背景样式
虽然在 Flexbox 布局中实现子元素的边框和背景样式有一些难度，但是我们可以通过一些技巧来解决这个问题。
把边框和背景样式应用到容器而不是子元素
一种选择是把边框和背景样式应用到 Flexbox 容器而不是子元素。例如，我们可以给容器添加一个边框并设置背景颜色：
.container {
border: 1px solid black;
background-color: #f5f5f5;
}这样做的好处是可以避免子元素大小和位置的问题，也能够保证整个布局的一致性。但是，这种方法有一个缺点，就是可能无法达到一些特定的设计要求。
使用伪元素将背景样式应用到子元素
另外一种选择是使用伪元素将背景样式应用到子元素。我们可以创建一个伪元素，并设置其宽度和高度为 100%，然后在伪元素上应用背景样式：
-- -------------------- ---- ------- ------------ - -------- --- --------- --------- ---- -- ----- -- ------ ----- ------- ----- ----------------- -------- -
这样做的好处是可以保证子元素的大小和位置，而且可以实现复杂的设计要求。但是，这种方法有一个缺点，就是可能会影响到子元素的 z-index 值。
使用 padding 和 box-shadow 实现边框样式
最后一种选择是使用 padding 和 box-shadow 实现边框样式。我们可以给子元素添加一个 padding 并设置 box-shadow 属性来实现边框样式。例如：
.box {
padding: 5px;
box-shadow: 0 0 0 1px black;
}这样做的好处是可以避免子元素大小和位置的问题，而且可以实现一些复杂的设计要求。但是，这种方法有一个缺点，就是可能会影响到子元素的 z-index 值。
示例代码
下面是一个使用伪元素实现背景样式的示例代码：
<div class="container"> <div class="box">This is a box.</div> </div>
-- -------------------- ---- ------- ---------- - --------- --------- ------ ------ ------- ------ ------- --- ----- ------ - ---- - --------- --------- ---- ---- ----- ---- ---------- --------------- ------ -------- ----- ----------------- ------ - ------------ - -------- --- --------- --------- ---- -- ----- -- ------ ----- ------- ----- ----------------- -------- -
结论
在 Flexbox 布局中实现子元素的边框和背景样式可能会有一些难度，但是我们可以使用不同的技巧来解决这个问题。无论使用哪种方法，我们都应该考虑其对整个布局的影响，并选择合适的方法来实现我们的设计要求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67020271f59b73a932a4d225