如何用CSS实现文本两端对齐

在CSS中实现两端对齐（justify content）主要是针对弹性盒子布局（Flexbox）而言的，这一布局模式可以非常方便地处理元素的对齐问题。在Flexbox布局中，使用`justify-content`属性可以设置容器内flex项目的沿主轴对齐方式。

以下是如何使用CSS来实现两端对齐的详细解释。

使用Flexbox实现两端对齐

当使用`justify-content: space-between;`时，Flexbox布局会让除了第一项和最后一项之外的所有flex项目都平均分布在容器中，第一项和最后一项分别紧靠容器的起始和结束边缘。

.container {
display: flex;
justify-content: space-between;
}

在上述代码中，`.container`代表一个设置了`display: flex;`的容器元素，这意味着它的直接子元素将成为flex项目。`justify-content: space-between;`确保了所有子项目在主轴方向上均匀分布，且两端对齐。

space-between 与 space-around 的区别

`space-between`：在flex项目之间放置均匀的空间，两端的flex项目与容器的边缘没有空间。

`space-around`：在flex项目之间放置均匀的空间，两端的flex项目与容器的边缘也有空间，不过这个空间是中间空间的一半。

对于多行Flex项目的两端对齐

如果需要处理多行flex项目的情况，`justify-content`属性不再适用，因为它是针对单行flex容器中的项目进行对齐的。对于多行，可以使用`align-content`属性，但是它不提供直接的两端对齐效果。

然而，如果想要类似两端对齐的效果，可以使用`flex-start`结合计算好的空间分配：

.container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}

.container > .flex-item {
margin-right: calc(100% / 3); /* 假设每行有三个flex项目 */
margin-bottom: 20px; /* 可选，设置垂直间距 */
}

.container > .flex-item:nth-child(3n) {
margin-right: 0; /* 清除每行最后一个项目的margin */
}

在上述例子中，我们通过`calc()`函数计算每个flex项目的`margin-right`，确保每行有三个项目，且每行的空间都能被平均分配。

如何用CSS实现文本两端对齐