什么是 Flexbox 布局
Flexbox（伸缩盒子）是一种 CSS3 布局模型，它可以让容器里的元素能够更加高效地对齐、排布和分布空间。它可以替代传统的基于浮动和定位进行布局的方式，同时具备更好的适应性和可伸缩性。
文本对齐效果
在一个容器内，我们可能需要对文本进行对齐，比如让文本居中对齐，或者让文本从左到右、从上到下排列，而在 Flexbox 布局下，我们可以很容易地实现这些效果。
Flexbox 布局下的文本对齐方式
在 Flexbox 布局下，有几种常用的文本对齐方式，包括左对齐、居中对齐、右对齐、从左到右排列和从上到下排列等。
左对齐
通过设置容器的 justify-content 属性为 flex-start，可以实现左对齐的效果。下面是一个示例代码：
---------- - -------- ----- ---------------- ----------- -
居中对齐
通过设置容器的 justify-content 属性为 center，可以实现居中对齐的效果。下面是一个示例代码：
---------- - -------- ----- ---------------- ------- -
右对齐
通过设置容器的 justify-content 属性为 flex-end，可以实现右对齐的效果。下面是一个示例代码：
---------- - -------- ----- ---------------- --------- -
从左到右排列
通过设置容器的 flex-direction 属性为 row，可以实现从左到右排列（默认排列方式）的效果。下面是一个示例代码：
---------- - -------- ----- --------------- ---- -
从上到下排列
通过设置容器的 flex-direction 属性为 column，可以实现从上到下排列的效果。下面是一个示例代码：
---------- - -------- ----- --------------- ------- -
总结
Flexbox 布局是一个功能强大、易用且可扩展的 CSS 布局模型，它提供了很多便捷的布局方式，尤其是在文本对齐方面，更加容易实现。通过灵活的运用这些特性，我们可以快速地实现我们需要的布局效果。在实际开发中，我们需要多多尝试，通过不断实践和学习，提高自己的技术水平。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e56a0ff6b2d6eab30d8f19