实现弹性容器布局需设置display: flex或inline-flex，通过flex-direction定义主轴方向，justify-content和align-items控制对齐方式，flex属性调节子元素伸缩性，组合运用可构建响应式布局。

要实现弹性容器布局，核心是使用 CSS 的 Flexbox 模型。只需几个关键属性，就能轻松控制元素的排列、对齐和伸缩行为。

设置弹性容器

将一个容器设为弹性布局，需给父元素设置 display: flex 或 display: inline-flex。

• display: flex; —— 容器变为块级弹性容器，子元素在一行内排列
• display: inline-flex; —— 容器为内联弹性容器，不独占整行

示例：

container {
  display: flex;
}

控制主轴方向

使用 flex-direction 决定子元素的排列方向。

• row（默认）—— 从左到右水平排列
• row-reverse —— 从右到左
• column —— 从上到下垂直排列
• column-reverse —— 从下到上

例如：

container {
  display: flex;
  flex-direction: column;
}

设置对齐方式

通过以下属性控制元素在主轴和交叉轴上的对齐。

• justify-content：控制主轴对齐（如水平方向）
  - flex-start, flex-end, center, space-between, space-around 等
• align-items：控制交叉轴对齐（如垂直方向）
  - stretch（拉伸填满）, center, flex-start, flex-end, baseline

常用组合：

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

这会让子元素在容器中水平垂直居中。

控制子元素的伸缩性

每个子元素可设置 flex 属性，控制其如何分配空间。

• flex: 1 —— 均匀占据可用空间
• flex: 2 1 0 —— 分配更多空间，支持复杂伸缩规则

例如让两个子项等宽：

.item {
  flex: 1;
}

基本上就这些。灵活运用 display、flex-direction、justify-content、align-items 和 flex 属性，就能快速构建响应式、自适应的布局结构。不复杂但容易忽略细节。