1. 引言
在前端开发中，对于多行文字对齐的布局，很多开发者可能会选择使用 table 或者 float 等方式来实现，但这些方式都存在一定的局限性。而利用 CSS Flexbox 技术来实现多行文字对齐的布局，则更加灵活和方便。本文通过设计样例并结合代码来详细讲解如何利用 CSS Flexbox 技术实现多行文字对齐的技巧。
2. 样例说明
本文所举例的样例，是一个现实生活中常见的场景：购物车中的商品列表。在购物车列表中，每一个商品通常包含商品图片、商品名称、商品数量和商品单价等信息，这些信息需要在同一行进行对齐展示。
如图所示，这是一个比较典型的多行文字对齐的布局示例，可以看到商品图片、名称、单价和数量都在各自所属的行中对齐了。
3. 实现思路
在实现上述多行文字对齐的布局时，主要需要使用到以下两个 CSS 属性：
3.1 display
CSS 属性 display 是用来控制元素的布局方式的，其中包含多个可选取值。在本文用到的布局方式中，我们需要使用的是 display: flex，这个属性值表示将元素变成一个弹性布局容器，并启用 flex 布局模式。
3.2 justify-content
CSS 属性 justify-content 是用来调整弹性容器中项目的对齐方式的，其中包含多个可选取值。在本文用到的对齐方式中，我们需要使用的是 justify-content: space-between，这个属性值表示项目之间的间隔平均分布，并且左右两端保留间隔。这个对齐方式非常适合针对本文所讨论的多行文字对齐的场景。
4. 代码实现
以下是基于上述实现思路，用 HTML 和 CSS 代码实现的购物车商品列表样例：
-- -------------------- ---- -------
---- -------------------
-- ------------- ----------------- ------- -------
---- -------------
-- -------------------------------------------
---------------------
---- ------------
------------------
------ ----------- ----------
------------------
------
------
-------- -------------------- ---- ------- ----------- - -------- ----- ---------------- -------------- ------------ ------- -------- ---- -- -------------- --- ----- ----- ---------- ----- - ----------- --- - ------ ------ ------- ------ - ----------- ----- - ----- -- ------------ ----- - ----------- ----- - - -------- ------ ------------ ----- ---------- ----- ------ ----- ---------------- ----- ------------ ------- --------- ------- -------------- --------- - ----------- ----- ---- - -------- ------ ------- ---- -- ------ ----- - ----------- ---- - -------- ----- ------------ ------- - ----------- ---- ------ - ------ ----- ------- ----- ------- ----- ----------------- ----- ---------- ----- ------ ----- ------- -------- - ----------- ---- ----- - ------ ----- ------- ----- ----------- ------- ------- ----- -------- ----- ------- - ----- -
注：为了展示效果，本文中的样例代码略作修改，但不影响阅读和理解本文所述内容。
5. 总结
本文详细讲解了如何借助 CSS Flexbox 技术来实现多行文字对齐的布局，其中使用到的 display 和 justify-content 两个属性的详细说明，能帮助开发者更好地理解与掌握这一技术。当然，利用 CSS 来实现布局还有很多其他值得探究的技巧，读者可以在其它的优秀教程或书籍中进一步深入学习，以提高自己的前端开发技术水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64637221968c7c53b047a714