使用flex布局实现一左一右对齐

使用 Flex 布局可以轻松实现一左一右对齐。以下是一个简单的示例：

HTML:

<div class="container">
  <div class="left-item">左边内容</div>
  <div class="right-item">右边内容</div>
</div>

CSS:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 如果需要垂直居中 */
}

.left-item, .right-item {
  /* 你可以在这里添加你需要的样式，比如宽度、高度、背景色等 */
}

在这个例子中，.container 是一个 flex 容器，justify-content: space-between; 会使得 .left-item 和 .right-item 分别靠左和靠右对齐，而 align-items: center; 则会使得它们在垂直方向上居中（如果需要的话）。你可以根据需要调整这些样式。

注意，这种方法的一个前提是 .container 的宽度要足够大，以便 .left-item 和 .right-item 之间有足够的空间。如果 .container 的宽度不够大，那么 .right-item 可能会跳到 .left-item 的下方，形成垂直排列，而不是水平排列。如果你想要避免这种情况，你可能需要给 .container 设置一个足够大的宽度，或者使用其他布局方法。