CSS Flexbox 是前端开发中比较常用的布局方式之一，特别是在实现多行垂直居中布局时，Flexbox 的优势更为明显。本文将详细介绍 Flexbox 实现多行垂直居中布局的技巧，并提供实用的代码示例，希望能帮助读者更好地掌握这项技能。
为什么需要多行垂直居中布局？
在前端开发中，我们常常需要实现一些 UI 元素的布局，其中多行垂直居中布局应用场景较为广泛，比如导航栏、商品列表、表格等等。多行垂直居中布局可以让多行元素在垂直方向上，同时保持居中对齐，使布局看起来更加美观。
在传统的 CSS 布局中，要实现多行垂直居中布局，需要使用复杂的定位或者表格布局方式，但这种方式不够灵活，也容易导致代码的臃肿和维护难度的提高。Flexbox 就是为了解决这种问题而出现的，它提供了一种简单、灵活、易维护的方式来实现多行垂直居中布局。
实现多行垂直居中布局的 Flexbox 技巧
下面我们将介绍几种常用的 Flexbox 技巧，可以帮助我们实现多行垂直居中布局。
技巧一：使用图文混排
这种方式适用于每行只有一个元素的情况，我们可以将元素设置为 inline 或者 inline-block，然后通过设置 vertical-align 属性来实现垂直居中对齐。具体代码如下：
-- -------------------- ---- ------- ---- ------------------ ---- --------------- ------- ------------------- ------ ------- ---------- - -------- ----- ------------ ------- - ---------- ---- ---------- ---- - -------- ------------- --------------- ------- - ---------- --- - ------------- ----- -- ------------ -- - --------
在这段代码中，我们通过设置 .container 的 display 属性为 flex，使其成为一个 Flex 容器，然后通过 align-items 属性来控制其子元素的垂直对齐方式。而 img 和 span 元素则被设置为 inline-block，并且使用 vertical-align 属性实现垂直对齐。
技巧二：设置 Flexbox 行高
对于每行有多个元素的情况，我们可以使用 Flexbox 的 line-height 特性来实现多行垂直居中布局。具体代码如下：
-- -------------------- ---- ------- ---- ------------------ ------------------- ------------------- ------------------- ------------------- ------------------- ------------------- ------ ------- ---------- - -------- ----- ---------- ----- ------------ ------- ------------ ----- - ---------- --- - ----------- ------- ----------- ------- - --------
在这段代码中，我们通过设置 .container 的 line-height 属性来控制所有行的高度，使其可以实现垂直居中对齐。由于每个元素都是均分的，我们使用 flex-basis 来设置每个元素的宽度，同时将 flex-wrap 设置为 wrap，使得所有元素可以自动换行。如果不需要均分元素的宽度，可以设置固定的宽度，并使用 justify-content 属性来调整元素的排列方式。
技巧三：使用伸缩盒子（Flexbox）
最常用的方式就是使用 Flexbox 来实现多行垂直居中布局，它具有更好的灵活性和可维护性。具体代码如下：
-- -------------------- ---- ------- ---- ------------------ ------------------- ------------------- ------------------- ------------------- ------------------- ------------------- ------ ------- ---------- - -------- ----- ---------- ----- -------------- ------- - ---------- --- - ----- - - ------- ----------- ------- -- ------ -- - --------
在这段代码中，我们设置 .container 的 display 属性为 flex，并且设置 flex-wrap 为 wrap，允许元素自动换行，然后通过 align-content 属性来控制所有行的垂直居中对齐方式。
Flexbox 设置元素的伸缩比例时，使用 flex 属性，其含义有三个值：
flex-grow：指定当前元素的放大比例，默认值为 0。flex-shrink：指定当前元素的缩小比例，默认值为 1。flex-basis：指定当前元素在不伸缩时的尺寸，默认为 auto。
通过设置这三个值可以实现不同元素之间的灵活布局。在这段代码中，我们设置每个元素的 flex 属性为 1 0 33.33%，使得每个元素可以均分容器宽度，并且当容器宽度不足时，不缩小元素尺寸。
总结
本文详细介绍了使用 CSS Flexbox 实现多行垂直居中布局的技巧，包括使用图文混排、设置 Flexbox 行高和使用伸缩盒子等三种方法。这些技巧可以帮助我们更加灵活地实现多行垂直居中布局，避免了传统布局方式的缺陷和弊端。希望读者可以掌握这些技巧，并在实际开发中加以应用，提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481db9e48841e9894151e91