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`和`align-items`属性。具体步骤如下：

1. 在父容器上添加`display: flex`属性，将其设置为弹性布局。
2. 使用`justify-content`属性来控制主轴上的对齐方式。设置为`flex-start`可以使子元素在主轴上左对齐，设置为`flex-end`可以使子元素在主轴上右对齐。
3. 使用`align-items`属性来控制侧轴上的对齐方式。设置为`flex-start`可以使子元素在侧轴上顶部对齐，设置为`flex-end`可以使子元素在侧轴上底部对齐。

以下是一个示例代码：

.parent {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

在上述示例中，父容器的子元素将会在主轴上左对齐，在侧轴上底部对齐。你可以根据需要调整对齐方式。

display: flex;两端对齐

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