在使用 Flexbox 布局进行内容排版时，我们经常会使用 gap 属性来控制子元素之间的间距。然而，目前并没有标准化的 gap 属性可供使用，而不同浏览器的处理也不尽相同，这时我们就需要使用一些技巧来解决这个问题。
方案一：使用 margin 属性
在默认情况下，Flexbox 布局将子元素之间的间距设置为 0。这时我们可以利用 margin 属性来为子元素设置边距，来实现间距的控制。
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- - ----- - ------ ------ ------- ------ ----------------- ----- ------------- ----- - ---------------- - ------------- -- -
在上述代码中，我们使用了 justify-content: space-between 属性来将子元素分散排列，同时通过 margin-right: 10px 来设置子元素之间的边距，并通过 item:last-child 选择器来清除最后一个子元素的右边距。
方案二：使用伪元素
我们可以通过为容器元素添加伪元素来实现子元素之间的间距控制。
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- - ----- - ------ ------ ------- ------ ----------------- ----- - ------------------ - -------- --- ----------- ----- ------------ -- - ----------------- - -------- --- ----------- ----- ------------ -- -
在上述代码中，我们通过 ::before 和 ::after 伪元素来设置容器元素的左右边距，同时指定 flex-basis: 10px 将它们的尺寸设置为 10px，flex-shrink: 0 防止它们在窄视口下被缩小。
方案三：使用 grid 布局
在使用 grid 布局时，我们可以通过网格线来控制子元素之间的间距。
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- --------- ----- - ----- - ------ ------ ------- ------ ----------------- ----- -
在上述代码中，我们使用 display: grid 将容器元素设为网格容器，使用 grid-template-columns 定义了一个三列的网格，每列的宽度占据容器的 1/3，使用 grid-gap 属性来定义子元素之间的间距。
总结
在使用 Flexbox 布局时，我们可以选择使用 margin 属性、伪元素或 grid 布局的方法来解决子元素间距控制的问题。其中，margin 属性是兼容性最好的方案，而伪元素和 grid 布局则需要针对不同浏览器的兼容性进行一定的兼容处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d610248841e9894a2482c