背景
在网页开发中，我们经常需要使用到 Flexbox 布局。Flexbox 是一种简单、灵活的 CSS 布局方案，能够更加高效地完成水平或垂直方向的排列。但是，当我们需要对 Flexbox 中的子元素进行换行对齐时，就可能会遇到一些困难。这时，我们需要采取一些特殊的技巧来实现这一布局效果。
实现方法
下面，我们将介绍两种方法来实现在 Flexbox 布局下实现换行对齐。
方法一：使用空元素
第一种方法是使用空元素来占位。我们可以在 Flexbox 容器中添加一个高度为 0 的空元素，然后利用 Flexbox 的 flex-wrap 属性来实现换行对齐。具体实现方式如下：
HTML 代码：
<div class="flex-container"> <div class="flex-item">Item 1</div> <div class="flex-item">Item 2</div> <div class="flex-item">Item 3</div> <div class="flex-item">Item 4</div> <div class="flex-placeholder"></div> </div>
CSS 代码：
-- -------------------- ---- ------- --------------- - -------- ----- ---------- ----- - ---------- - ------ ------ ------- ------ ------- ----- ----------------- ----- - ----------------- - ------ ----- ------- -- --------- ------- -
在上述代码中，我们首先设置了 Flexbox 容器的 display 属性为 flex，并将其 flex-wrap 属性设置为 wrap，以实现换行布局。然后，我们定义了每个 Flexbox 子元素的宽度、高度和间距，并设置了背景颜色以便于查看效果。
接下来，我们在容器的最后添加了一个高度为 0 的空元素，用于占位。这样做的目的是为了让最后一行的子元素与容器顶部对齐，从而达到换行对齐的效果。
方法二：使用定位元素
第二种方法是使用定位元素来实现换行对齐。我们可以将每一行的子元素放在一个包含块元素中，并给该包含块元素设置绝对定位，然后利用 margin-left 和 margin-top 属性来控制子元素的位置。具体实现方式如下：
HTML 代码：
-- -------------------- ---- -------
---- -----------------------
---- ------------------------
---- ---------------------- -------
---- ---------------------- -------
------
---- ------------------------
---- ---------------------- -------
---- ---------------------- -------
------
------CSS 代码：
-- -------------------- ---- ------- --------------- - -------- ----- ---------- ----- --------- --------- - ---------------- - --------- --------- ---- -- ----- -- ------- ----- - ---------- - ------ ------ ------- ------ ----------------- ----- -
在上述代码中，我们首先设置了 Flexbox 容器的 display 属性为 flex，并将其 flex-wrap 属性设置为 wrap，以实现换行布局。然后，我们定义了每个 Flexbox 子元素的宽度、高度和间距，并设置了背景颜色以便于查看效果。
接下来，我们将每一行的子元素分别放在一个包含块元素中，并给该包含块元素设置绝对定位和 margin 属性，实现对子元素位置的控制。此时，我们需要为 Flexbox 容器设置 position: relative，以便于包含块元素的定位。
总结
通过上述两种方法，我们可以在 Flexbox 布局中实现换行对齐，从而实现更加高效的网页布局。通过灵活应用这些技巧，我们可以在实际开发中更加方便地处理子元素的排布问题，提高工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e61825f6b2d6eab3187913