CSS Flexbox 布局是前端开发中非常重要的一种布局方式，它可以让我们轻松地实现各种复杂的排版需求，特别是用来实现响应式页面的效果更佳。本文将通过一个实例来介绍 CSS Flexbox 布局的使用，帮助读者更好地理解和掌握该技术。
实例说明
本文的实例是实现一个可伸缩的合作伙伴栏，如下所示：
如图所示，合作伙伴栏包含了 4 个合作伙伴的 Logo，这些 Logo 的宽度相等，通过 Flex 布局将它们平均分布在可用空间内。当浏览器的宽度变窄时，这些 Logo 应该自适应宽度，直到达到一个最小宽度的阈值，此时它们应该进行换行，并垂直居中显示，如下图所示：
接下来，我们就来一步步实现这个可伸缩的合作伙伴栏，让你更好地理解和掌握 CSS Flexbox 布局的使用方法。
HTML 结构
首先，我们需要先在 HTML 中构建基本的结构，代码如下所示：
<div class="partner-section">
<div class="partner-list">
<a href="#" class="partner-logo"><img src="https://via.placeholder.com/160x160" alt="合作伙伴"></a>
<a href="#" class="partner-logo"><img src="https://via.placeholder.com/160x160" alt="合作伙伴"></a>
<a href="#" class="partner-logo"><img src="https://via.placeholder.com/160x160" alt="合作伙伴"></a>
<a href="#" class="partner-logo"><img src="https://via.placeholder.com/160x160" alt="合作伙伴"></a>
</div>
</div>我们在外层使用了一个 partner-section 的 div 容器，以及内层的 partner-list 容器，后者用来承载所有合作伙伴的 Logo。注意，在每个 Logo 前面使用了一个 a 标签，且其 href 属性为空，这是为了便于之后添加链接或者点击事件等操作。
CSS 样式
接下来，我们还需要对 HTML 中的元素进行样式设置，使用 Flexbox 布局来实现我们的需求。代码如下所示：
-- -------------------- ---- ------- ---------------- - ------- ---- -- ----------------- -------- -------- ----- - ------------- - -------- ----- ---------- ----- ------------ ------- ---------------- -------------- - ------------- - ------ ---- -------- ----- - ------------- --- - ---------- ----- ------- ----- -
以上 CSS 代码中，我们对最外层的 partner-section 容器进行了一些简单的样式设置，便于显示和区分。接着，我们对 partner-list 容器进行设置：
display: flex;表示将其设置为 Flex 布局方式，这样我们就可以更灵活地控制子元素相互之间的排列和显示方式；flex-wrap: wrap;表示在空间不足时自动换行，这样我们就可以让 Logo 自适应宽度，并且保证它们可以在一行内显示；align-items: center;表示将子元素垂直居中对齐，这样就可以让单个 Logo 垂直居中，有助于视觉效果；justify-content: space-between;表示在可用空间内平均分布子元素，这样就可以让多个 Logo 平均占据整个宽度空间，而不是紧挨在一起。
最后，我们对 .partner-logo 和 .partner-logo img 进行了一些简单的样式设置，使其能够在 Flex 布局中垂直居中并且自适应高度和宽度。
总结
通过以上的实例，我们可以看到，CSS Flexbox 布局是前端开发中非常重要的一种布局方式，它可以轻松实现各种复杂的排版需求，特别是响应式排版效果更佳。在实际开发中，我们可以通过灵活运用 Flexbox 布局的各种属性，来实现更加优秀的效果。希望本文可以为读者提供一些参考和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f31dc968c7c53b0d978f7