display: flex; 两端对齐

要实现 flex 布局的两端对齐，可以使用 justify-content 属性，并将其设置为 space-between 或 space-around。具体做法如下：

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

或者

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

其中，space-between 表示让容器内的元素在两端对齐，并且元素之间的间距相等；space-around 则表示让容器内的元素在两端对齐，并且元素之间的间距相等，同时容器两端与元素之间的间距也相等。

需要注意的是，如果容器内的元素宽度不一致，那么 space-between 和 space-around 的效果可能会有所不同。在某些场景下，可能需要使用 flex-grow 属性来控制元素的宽度，以达到更好的布局效果。

相关问题

display: flex;两端对齐

display: flex;的justify-content属性可以用来控制flex容器中项目的对齐方式。其中，justify-content:flex-start;表示左对齐，justify-content:flex-end;表示右对齐。[2]所提到的样式代码中，通过设置justify-content:flex-end;可以实现将flex容器中的项目右对齐。[1]

display: flex; 两端对齐

可以使用`justify-content: space-between;`来实现两端对齐的效果。这个属性可以让 flex 容器中的项目沿着主轴方向排列并分布对齐，其中 space-between 的值表示项目之间的间隔平均分配，从而实现左右两端对齐的效果。具体使用方式如下：

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