0 基础也能懂的 Flex 布局教程：3 步搞定网页排版

如果你刚学网页制作，每次排版都要跟浮动（float）、margin/padding 死磕，那一定要试试 Flex 布局！它就像给容器装了个 "智能排版系统"，让里面的元素想怎么排就怎么排，不用再算来算去。

这篇文章全程用 "人话"+"例子" 讲解，哪怕你没写过一行代码，也能跟着学会。

一、先搞懂 2 个核心概念：容器和项目

Flex 布局的本质，是 "容器指挥项目怎么排"。先分清这两个角色，后面就简单了：

角色	定义	举个例子
Flex 容器（Container）	你划定的一块 "排版区域"，比如一个 div 盒子	就像一个书架，书架本身就是 "容器"
Flex 项目（Item）	容器里面要排版的元素，比如多个小 div	书架上的每一本书，就是 "项目"

关键第一步：把容器变成 "Flex 容器"

只要给容器加一行 CSS 代码，它就拥有了指挥项目的能力：

css

css 复制代码

/* 给容器加这个属性，它就变成Flex容器了 */
.container {
  display: flex;
}

没加之前，项目会默认 "从上到下叠着排"；加了之后，项目会自动 "从左到右排成一行"------ 这是 Flex 的默认效果，也是最常用的效果之一。

二、核心用法：容器怎么指挥项目？（4 个常用属性）

Flex 容器有很多 "指挥权"，我们先学最常用的 4 个，覆盖 90% 的排版场景。每个属性都配 "代码 + 效果描述"，一看就懂。

1. 控制项目 "排一行还是排多行"：flex-wrap

默认情况下，容器里的项目会挤在一行（哪怕超出容器也不换行）。用flex-wrap可以让项目 "装不下时自动换行"。

属性值	效果	适合场景
`nowrap`（默认）	所有项目挤在一行，超出容器也不换行	导航栏、标签栏（项目少的情况）
`wrap`	装不下时自动换行，往下排	商品列表、图片墙（项目多的情况）

例子：商品列表自动换行

如果容器里有 6 个商品，加flex-wrap: wrap后，屏幕窄了会自动换行，不用手动调：

css

css 复制代码

/* 容器样式 */
.shop-container {
  display: flex; /* 开启Flex */
  flex-wrap: wrap; /* 装不下自动换行 */
  width: 800px; /* 容器宽度固定 */
}

/* 项目样式（每个商品） */
.shop-item {
  width: 200px; /* 每个商品宽200px */
  height: 300px; /* 每个商品高300px */
  margin: 10px; /* 商品之间留空隙 */
}

2. 控制项目 "水平方向怎么排"：justify-content

这个属性管 "项目在容器里左右怎么对齐"，比如靠左、靠右、居中，或者均匀分布。是最常用的属性之一！

属性值	效果	适合场景
`flex-start`（默认）	项目靠左排	普通列表、文章段落
`flex-end`	项目靠右排	右侧工具栏、按钮组
`center`	项目水平居中	页面标题、弹窗内容
`space-between`	项目两端对齐，中间空隙相等	导航栏（左边 logo，右边菜单）
`space-around`	项目之间空隙相等，两边也有空隙	卡片列表、图标组

例子：导航栏两端对齐

左边放 logo，右边放菜单，用space-between一键搞定，不用再算 margin：

css

css 复制代码

/* 导航栏容器 */
.nav {
  display: flex; /* 开启Flex */
  justify-content: space-between; /* 两端对齐 */
  width: 100%; /* 导航栏占满屏幕宽度 */
  height: 60px; /* 导航栏高度 */
}

/* 项目：logo和菜单 */
.nav-logo, .nav-menu {
  height: 100%; /* 和导航栏同高 */
}

3. 控制项目 "垂直方向怎么排"：align-items

这个属性管 "项目在容器里上下怎么对齐"，比如靠上、靠下、居中，解决了很多 "垂直居中" 的痛点！

属性值	效果	适合场景
`stretch`（默认）	项目高度自动撑满容器	卡片列表（所有卡片一样高）
`flex-start`	项目靠上对齐	顶部工具栏、标题栏
`flex-end`	项目靠下对齐	底部按钮组、版权信息
`center`	项目垂直居中	文字和图标对齐、弹窗内容居中
`baseline`	项目按文字基线对齐	表单（输入框和按钮文字对齐）

例子：文字和图标垂直居中

以前图标和文字总对不齐，用align-items: center一键解决：

css

css 复制代码

/* 容器：一行内容（图标+文字） */
.icon-text {
  display: flex; /* 开启Flex */
  align-items: center; /* 垂直居中 */
  height: 40px; /* 容器高度 */
}

/* 项目：图标和文字 */
.icon {
  width: 24px;
  height: 24px;
}
.text {
  font-size: 16px;
  margin-left: 8px; /* 图标和文字留空隙 */
}

4. 控制 "多行项目" 的垂直对齐：align-content

如果项目换行了（用了flex-wrap: wrap），align-content可以控制 "多行项目整体在垂直方向怎么排"（单一行时无效）。

属性值	效果	适合场景
`stretch`（默认）	多行项目高度平分容器	图片墙、商品列表
`center`	多行项目整体垂直居中	居中的卡片组
`space-between`	多行项目上下两端对齐，中间空隙相等	均匀分布的列表

例子：多行商品垂直居中

如果容器高度比所有商品加起来高，用align-content: center让所有商品整体居中：

css

css 复制代码

.shop-container {
  display: flex;
  flex-wrap: wrap; /* 先让项目换行 */
  align-content: center; /* 多行项目整体垂直居中 */
  width: 800px;
  height: 800px; /* 容器高度足够高 */
}

三、进阶：让单个项目 "搞特殊"（align-self）

前面的align-items是 "控制所有项目" 的垂直对齐，而align-self可以给 "单个项目" 单独设置垂直对齐方式，覆盖容器的align-items。

例子：让某个商品 "靠下对齐"

比如 6 个商品里，第 3 个要特殊，靠下对齐，其他靠上：

css

css 复制代码

/* 容器：所有项目默认靠上对齐 */
.shop-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* 所有项目靠上 */
  width: 800px;
  height: 500px;
}

/* 单个项目：第3个商品靠下对齐 */
.shop-item:nth-child(3) {
  align-self: flex-end; /* 单独靠下 */
}

四、实战小案例：3 分钟做一个居中弹窗

学完上面的知识，我们来做个实用的案例 ------ 弹窗（登录框、提示框），用 Flex 轻松实现 "水平 + 垂直居中"。

最终效果：

弹窗在浏览器正中间，不管屏幕多大，都不会跑偏。

代码步骤：

先做一个 "全屏背景容器"，让它覆盖整个页面；
在背景里放 "弹窗容器"，用 Flex 让它居中；
弹窗里放内容（标题、输入框、按钮）。

html

xml 复制代码

<!-- HTML结构 -->
<div class="modal-bg"> <!-- 全屏背景容器 -->
  <div class="modal"> <!-- 弹窗容器 -->
    <h2>登录账号</h2> <!-- 弹窗内容 -->
    <input type="text" placeholder="用户名">
    <input type="password" placeholder="密码">
    <button>登录</button>
  </div>
</div>

css

css 复制代码

/* CSS样式 */
/* 1. 全屏背景容器：让弹窗在页面居中 */
.modal-bg {
  display: flex; /* 开启Flex */
  justify-content: center; /* 弹窗水平居中 */
  align-items: center; /* 弹窗垂直居中 */
  position: fixed; /* 固定在屏幕上 */
  top: 0;
  left: 0;
  width: 100%; /* 占满屏幕宽 */
  height: 100%; /* 占满屏幕高 */
  background: rgba(0,0,0,0.5); /* 半透明黑色背景 */
}

/* 2. 弹窗容器：里面的内容水平排列 */
.modal {
  display: flex; /* 开启Flex */
  flex-direction: column; /* 让内容垂直排列（默认是水平） */
  gap: 15px; /* 内容之间留15px空隙 */
  padding: 30px;
  background: white;
  border-radius: 8px; /* 圆角 */
}

/* 3. 弹窗内容样式（简单美化） */
.modal h2 {
  margin: 0;
  text-align: center;
}
.modal input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.modal button {
  padding: 10px;
  background: #0084ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

为什么这么简单？

不用算top: 50%; left: 50%; transform: translate(-50%, -50%)这种复杂公式；
不用管弹窗里有多少内容，Flex 会自动让它居中；
屏幕大小变化时，弹窗会跟着自动居中。

五、总结：Flex 布局核心口诀

最后送你一句口诀，记住就能搞定大部分场景：

先给容器加display: flex（开启 Flex 模式）；
水平对齐用justify-content（左右怎么排）；
垂直对齐用align-items（上下怎么排）；
装不下就用flex-wrap: wrap（自动换行）；
单个项目搞特殊用align-self（单独对齐）。

现在你可以打开代码编辑器，试着改改上面的例子 ------ 比如把justify-content换成center，看看项目怎么变；把align-items换成flex-end，又会有什么效果。多试几次，你就会发现 Flex 布局真的很简单！