如何使用 CSS 左右对齐 flexbox 列？

Flexbox 是一种 CSS 布局系统，可以轻松地设置元素的左右对齐。在本文中，我们将介绍如何使用 Flexbox 列布局来实现左右对齐的效果。

1. 创建 HTML 结构

首先，我们需要创建相应的 HTML 结构。假设我们有一个包含左右两列内容的容器。以下是一个简单的示例：

<div class="container">
  <div class="left-column">左侧内容</div>
  <div class="right-column">右侧内容</div>
</div>

2. 设置 CSS 样式

接下来，我们需要为容器和列元素设置一些 CSS 样式。我们将使用 Flexbox 的属性来实现左右对齐的效果。

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

.left-column {
  /* 左侧列样式 */
}

.right-column {
  /* 右侧列样式 */
}

在上面的示例中，我们使用 display: flex 将容器设置为 Flexbox 布局，并使用 justify-content: space-between 将两列元素的间距设置为相等。

3. 自定义列的样式

最后，你可以在 .left-column 和 .right-column 类中自定义你想要的样式。例如，你可以设置宽度、背景颜色、边距等等。

.left-column {
  width: 50%;
  background-color: lightblue;
}

.right-column {
  width: 50%;
  background-color: lightgray;
}

在上面的示例中，我们将两列的宽度都设置为 50%，并为它们分别设置了不同的背景颜色。

完整代码示例

下面是一个完整的代码示例，展示了如何使用 Flexbox 列布局实现左右对齐的效果：

<div class="container">
  <div class="left-column">左侧内容</div>
  <div class="right-column">右侧内容</div>
</div>

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

.left-column {
  width: 50%;
  background-color: lightblue;
}

.right-column {
  width: 50%;
  background-color: lightgray;
}
</style>

通过以上步骤，你可以轻松地使用 Flexbox 列布局实现左右对齐的效果。根据你的需求，你可以自定义容器和列的样式来达到所需的布局效果。