flex布局两端对齐

在 Flex 布局中，可以使用 justify-content 属性来控制子元素在主轴上的对齐方式。要实现两端对齐（两端留有空白），可以使用 justify-content: space-between; 属性。

以下是一个示例代码：

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

在上述代码中，.container 是包含 Flex 子元素的容器，通过将 justify-content 属性设置为 space-between，子元素会在主轴上均匀分布，首尾子元素分别对齐容器的两端，从而实现两端对齐的效果。

请注意，以上代码仅涉及主轴上的对齐方式，如果需要在交叉轴上对齐子元素，可以使用 align-items 或 align-self 属性。