css 实现两端对齐

CSS实现两端对齐可以使用以下两种方法：

1. 使用Flexbox布局：
- 将父容器的`display`属性设置为`flex`，并且设置`justify-content`属性为`space-between`。
- 这样子元素会在父容器中均匀分布，并且第一个子元素靠左对齐，最后一个子元素靠右对齐。

示例代码如下：

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

2. 使用text-align属性：
- 将父容器的`text-align`属性设置为`justify`。
- 这样子元素会在父容器中均匀分布，并且第一个子元素靠左对齐，最后一个子元素靠右对齐。

示例代码如下：

   .container {
     text-align: justify;
   }
   .container::after {
     content: "";
     display: inline-block;
     width: 100%;
   }

相关问题

css实现文字两端对齐

CSS实现文字两端对齐可以使用text-align-last属性，该属性可以设置最后一行文本的对齐方式，包括left、right、center和justify四种取值。其中，justify表示两端对齐。

例如：

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

这样就可以实现文字的两端对齐。但需要注意的是，该属性在一些浏览器上并不支持或支持程度不同，所以需要做好兼容性处理。

css div两端对齐

可以使用Flexbox来实现CSS div两端对齐。具体实现步骤如下：

1. 在父元素上设置display: flex; 和 justify-content: space-between; 属性。
2. 让子元素宽度自适应，可以使用flex-grow: 1; 属性。

示例代码如下：

HTML:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS:

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

.item {
  flex-grow: 1;
}

这样就可以让三个子元素在父元素中两端对齐了。