[分享]css两端对齐最后一行不对齐

p标签：在网页设计中，我们常常会用到两端对齐的布局方式。不过，当最后一行的内容不足以填满整行时，两端对齐的效果就不太好了。这时候，我们需要对最后一行进行特殊处理，使其看起来更加美观。pre标签：.st...

p标签：在网页设计中，我们常常会用到两端对齐的布局方式。不过，当最后一行的内容不足以填满整行时，两端对齐的效果就不太好了。这时候，我们需要对最后一行进行特殊处理，使其看起来更加美观。
pre标签：

.stretched-last {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.stretched-last::before {
  content: ';
  flex: auto;
}

.stretched-last::after {
  content: ';
  flex: auto;
} 

p标签：这个特殊处理的方法就是用到了CSS的flex布局。对于需要两端对齐的元素，我们可以使用flex布局中的justify-content属性，将其设为space-between，从而实现两端对齐的效果。而对于最后一行内容不足的情况，我们可以使用CSS伪类来添加额外的元素，从而使其填满整行。
pre标签：

<div class="stretched-last">
  <p>这是一段文字，</p>
  <p>这是第二段文字，</p>
  <p>这是第三段文字，</p>
  <p>这是最后一行。</p>
</div> 

p标签：通过在包裹元素上添加.stretched-last类，将其设为flex布局，并使用::before和::after伪类来添加空白元素，最终实现了两端对齐并且最后一行内容不足时也能够填满整行的效果。
pre标签：

.stretched-last {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.stretched-last::before {
  content: ';
  flex: auto;
}

.stretched-last::after {
  content: ';
  flex: auto;
} 

p标签：实现这个效果的代码并不复杂，在实际应用中可以通过对CSS的灵活运用来实现更多的布局方式。