css flex 左右布局

要实现CSS Flexbox的左右布局，你可以使用以下步骤：

1. 创建一个包含两个子元素的容器元素。例如，你可以创建一个 `<div>` 元素，并给它一个特定的类或ID。

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

2. 使用CSS的`display: flex;`属性将容器元素设置为Flex容器。

.container {
  display: flex;
}

3. 指定左右两个子元素的宽度或弹性。

- 如果你希望左侧元素占据固定的宽度，可以使用`width`属性。

.left {
  width: 200px;
}

- 如果你希望左侧元素自动适应其内容的宽度，而右侧元素占据剩余的空间，可以使用`flex`属性。

.left {
  flex: 0 0 auto; /* 不放大、不缩小、自动适应内容宽度 */
}
.right {
  flex: 1 1 auto; /* 放大、缩小、自动适应剩余空间 */
}

4. 可选：添加其他样式以调整布局和外观。

.container {
  display: flex;
  justify-content: space-between; /* 左右对齐 */
  align-items: center; /* 垂直居中 */
}

.left, .right {
  padding: 10px;
  background-color: #eee;
}

这样，你就可以实现一个简单的CSS Flexbox的左右布局。根据你的具体需求，你可以进一步调整样式和属性。