CSS两端对齐

在网页设计过程中，我们经常需要对文字或者图块进行两端对齐，以使页面展示更美观、整洁。下面我们将介绍一些常见的CSS方法来实现两端对齐。

1. text-align: justify

文本对齐是CSS中最基础的样式属性之一。text-align 属性指定文本的水平对齐方式。它的值可以是left、right、center和justify。其中， justify 值用于实现文本两端对齐的效果。

.text {
  text-align: justify;
}

这个属性可以适用于多行文本元素（例如段落或者带有换行的 div 元素）。但是，当文本过短或者单词过长时，段落两端对齐的效果就会受到影响。

2. text-align-last

text-align-last属性是CSS3中新增的属性，解决了text-align属性不能对齐最后一行的问题。它允许指定最后一行的对齐方式。

.text {
  text-align: justify;
  text-align-last: justify;
}

设置 text-align-last 为 justify，既可以对齐第一行，也可以对齐最后一行，避免了最后一行靠左显示的问题。

3. Flexbox

Flexbox是一个强大的现代布局模型，能够实现各种复杂的布局效果，包括两端对齐。Flexbox布局有两个主要的容器属性：justify-content 和align-items，其中 justify-content 属性可以实现两端对齐的效果。

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

在上面的代码中，我们将容器的 display 属性设置为 flex，然后使用 justify-content 属性将 flex 子项两端对齐。

4. Grid

CSS网格布局是CSS3中另一个强大的布局模型，它允许您将页面分成网格来对齐和放置元素。 Grid布局与 Flexbox布局类似，可以实现两端对齐。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  justify-items: space-between;
}

在上面的代码中，我们将容器的 display 属性设置为 grid，使用 repeat() 函数将元素均分成一行或一列，使用 minmax() 函数限制元素的最小和最大尺寸。最后，我们使用 justify-items 属性将网格项两端对齐。

以上就是CSS实现两端对齐的常见方法。您可以根据实际的页面需求来选择不同的布局方案，实现相应的效果。