如何使用 Flexbox 水平排列元素：最左边和最右边

您可以使用 Flexbox 布局来水平排列元素，并使其中一个元素位于最左边，另一个元素位于最右边。以下是一个简单的示例：

HTML 代码：

<div class='container'>
  <div class='left'>最左边的元素</div>
  <div class='right'>最右边的元素</div>
</div>

CSS 代码：

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

.left {
  order: 1; /* 设置左边元素的顺序为 1，使其排在最左边 */
}

.right {
  order: 2; /* 设置右边元素的顺序为 2，使其排在最右边 */
}

在上述示例中，我们将父容器设置为 Flexbox 布局，并使用 `justify-content: space-between;` 将左右元素分别对齐到容器的最左和最右。我们还使用 `align-items: center;` 将两个元素垂直居中。最后，我们使用 `order` 属性来控制每个元素的顺序。左边元素的顺序为 1，右边元素的顺序为 2，因此左边元素排在最左边，右边元素排在最右边。