简介
Flexbox 是一种用于创建弹性布局的 CSS 模块。Flexbox 使得在容器中的子元素可以自由地伸缩，适应不同的设备尺寸和浏览器窗口大小。在使用 Flexbox 布局时，我们经常会使用伪元素来实现一些特定效果，例如居中、对齐等。本文将介绍在 CSS Flexbox 中使用伪元素实现一些常用的技巧。
垂直居中
在 Flexbox 中实现垂直居中比较困难。但是使用 ::before 和 ::after 伪元素可以轻松地实现垂直居中。
-- -------------------- ---- ------- ---------- - -------- ----- ------------ ------- ---------------- ------- - ------------------- ----------------- - -------- --- ----- -- -
以上代码中，我们首先将容器的 display 属性设置为 flex，align-items 属性设置为 center，justify-content 属性设置为 center，这样子元素就可以在容器中垂直居中了。接着使用 ::before 和 ::after 伪元素，将它们的 flex 属性设置为 1，以占用剩余的空间，从而让子元素自动垂直居中。
左右对齐
在 Flexbox 中实现左右对齐也比较困难，但是使用伪元素可以轻松实现。
-- -------------------- ---- ------- ---------- - -------- ----- - ------------------- ----------------- - -------- --- ----- -- - ------------------ - ------------- ----- - ----------------- - ------------ ----- -
以上代码中，我们同样使用 ::before 和 ::after 伪元素，将它们的 flex 属性设置为 1，以占用剩余的空间。左对齐的话，我们需要将 ::before 的 margin-right 属性设置为 auto；右对齐的话，我们需要将 ::after 的 margin-left 属性设置为 auto。
自适应列宽
在 Flexbox 中实现自适应列宽比较简单，只需要使用 flex 属性即可。但是如果我们希望在这些列之间添加分割线，就需要使用伪元素来实现。
<div class="container"> <div class="column">Column 1</div> <div class="column">Column 2</div> <div class="column">Column 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ------- - ----- -- - ------------------------------- - -------- --- ------ ---- ----------------- ----- ------------ ---- -
以上代码中，我们首先将容器的 display 属性设置为 flex。接着将 column 类的元素的 flex 属性设置为 1，将它们等分容器的宽度。最后，我们使用 :not(:last-child) 伪类选择器来选择除了最后一个元素的 column 类元素，并使用 ::after 伪元素为它们添加分割线。
优雅的卡片
在前端开发中，我们经常需要展示一组卡片。使用 Flexbox 可以轻松实现这种卡片展示效果。
-- -------------------- ---- -------
---- ------------------
---- -------------
------- -----
------
---- -------------
------- -----
------
---- -------------
------- -----
------
-------- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- ------- - ----- - ----------------- -------- -------- ----- ------- ----- ----------- ------ ---------- ----- ----------- --- --- --- ------- -- -- ----- - ----- - - -------------- -- -
以上代码中，我们首先将容器的 display 属性设置为 flex，flex-wrap 属性设置为 wrap，justify-content 属性设置为 center，这样子元素就会自动换行，并居中对齐。接着，我们定义一个 card 类来实现每个卡片的样式。在卡片的样式中，我们使用 flex-basis 属性设置每个卡片的初始宽度，max-width 属性设置每个卡片的最大宽度（当容器的宽度小于这个值时，卡片的宽度会自动调整），box-shadow 属性设置卡片的阴影效果。最后，我们将卡片内部的元素与卡片容器的底部对齐。
总结
在本文中，我们介绍了使用 ::before 和 ::after 伪元素实现在 CSS Flexbox 中垂直居中、左右对齐、自适应列宽以及优雅的卡片展示效果。在实际开发中，这些技巧都非常实用，能够帮助我们更快速、更高效地实现复杂的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa462448841e989466b2ca