实现弹性容器布局需设置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 —— 从下到上

例如：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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 属性，就能快速构建响应式、自适应的布局结构。不复杂但容易忽略细节。