如何在CSS中实现左右方向的弹性布局（flexbox）？

在CSS中，实现左右方向的弹性布局通常使用Flexbox技术。以下是基本步骤：

1. **启用 Flexbox**：首先，在包含元素上设置 `display: flex;` 或者 `display: -webkit-flex;` 以启用弹性盒模型。对于容器（父元素）来说，这是必需的。

.container {
   display: flex;
   /* 可选，设置主轴方向 */
   flex-direction: row; /* 默认值，表示从左到右 */
}

2. **设置主轴和侧轴**：通过 `flex-direction` 属性控制主轴的方向。默认情况下，主轴是水平的，从左到右。

3. **分配空间**：你可以使用 `justify-content` 属性来控制子元素在主轴上的对齐方式。例如，`justify-content: space-between;` 将子元素均匀分布在主轴两侧，留有空隙。

4. **自适应子元素**：为了使子元素按需调整大小，可以设置 `flex-grow`, `flex-shrink`, 和 `flex-basis`。它们分别决定了元素增长、缩小以及初始大小。

5. **指定宽度**：如果你想要保持某个子元素的固定宽度，可以设置 `flex: 0 1 auto;` ，其中第一个0表示不生长，第二个1表示不收缩，auto表示基于内容的基础尺寸。

6. **应用响应式设计**：如果需要响应屏幕变化，可以添加媒体查询调整样式。

示例：

.item {
   flex: 1; /* 自动缩放并填充可用空间 */
   margin-right: 10px; /* 侧边间距 */
}

@media (max-width: 768px) {
   .container {
      flex-direction: column; /* 改变为垂直排列 */
   }
}