CSS Flexbox 弹性布局

学习 display:flex 进行灵活布局 · 难度：进阶 · +15XP

CSS Flexbox 弹性布局

Flexbox（Flexible Box Layout）是 CSS3 引入的一种一维布局模型，专门用于在一条轴（水平或垂直）上排列和分配元素空间。它能轻松解决传统布局中垂直居中、等宽分布、自适应排列等棘手问题。

Flexbox 核心概念

Flexbox 有两个关键角色：

• Flex 容器（Flex Container）：设置了 display: flex 或 display: inline-flex 的父元素
• Flex 项目（Flex Items）：容器中的直接子元素

两个轴：主轴（Main Axis）和交叉轴（Cross Axis）。主轴由 flex-direction 决定。

容器属性速查表

属性	作用	常用值	默认值
display	激活 Flex 布局	flex, inline-flex	—
flex-direction	主轴方向	row | column | row-reverse | column-reverse	row
justify-content	主轴对齐方式	flex-start | flex-end | center | space-between | space-around | space-evenly	flex-start
align-items	交叉轴对齐（单行）	stretch | flex-start | flex-end | center | baseline	stretch
flex-wrap	是否换行	nowrap | wrap | wrap-reverse	nowrap
align-content	多行时交叉轴对齐	stretch | flex-start | flex-end | center | space-between | space-around	stretch
gap	项目间距（行 gap + 列 gap）	gap: 10px 20px; 或 row-gap / column-gap	0

项目属性速查表

属性	作用	说明	默认值
flex-grow	放大比例	剩余空间按比例分配，0 表示不放大	0
flex-shrink	缩小比例	空间不足时按比例缩小，0 表示不缩小	1
flex-basis	初始大小	分配剩余空间之前的基准大小	auto
flex	简写	flex: grow shrink basis；推荐用 flex: 1	0 1 auto
align-self	单个项目交叉轴对齐	覆盖容器的 align-items	auto
order	排序	数值越小越靠前，可以为负数	0

justify-content 可视化

flex-start:    |■ ■ ■            |
center:        |   ■ ■ ■         |
flex-end:      |          ■ ■ ■  |
space-between: |■       ■       ■|
space-around:  | ■  ■  ■ | (两端间距是中间的 1/2)
space-evenly:  |  ■  ■  ■  | (所有间距相等)

经典布局模式

1. 水平垂直居中（一行代码解决！）

.container {
  display: flex;
  justify-content: center;  /* 主轴（水平）居中 */
  align-items: center;      /* 交叉轴（垂直）居中 */
  height: 100vh;            /* 全屏高度 */
}

2. 导航栏 —— 两端对齐

<nav style="display: flex; justify-content: space-between; align-items: center; padding: 0 20px; height: 60px; background: #333; color: white;">
  <div class="logo">???? 武鸣大学城</div>
  <ul style="display: flex; list-style: none; gap: 24px; margin: 0; padding: 0;">
    <li>首页</li>
    <li>课程</li>
    <li>关于</li>
  </ul>
</nav>

3. 等宽三列布局

<div style="display: flex; gap: 20px;">
  <div style="flex: 1; background: #e8f4f8; padding: 20px;">左列</div>
  <div style="flex: 1; background: #fef9e7; padding: 20px;">中列</div>
  <div style="flex: 1; background: #fdedec; padding: 20px;">右列</div>
</div>

4. 圣杯布局 —— 中间自适应，两侧固定

<div style="display: flex; min-height: 100vh;">
  <aside style="width: 250px; background: #f5f5f5; padding: 20px;">侧边栏</aside>
  <main style="flex: 1; padding: 20px;">主内容区（自适应宽度）</main>
  <aside style="width: 300px; background: #f5f5f5; padding: 20px;">右侧栏</aside>
</div>

5. 自适应网格（自动换行）

<div style="display: flex; flex-wrap: wrap; gap: 16px; padding: 16px;">
  <div style="flex: 1 1 280px; background: #3498db; color: white; padding: 20px; border-radius: 8px;">
    卡片 1 —— 最小 280px，不够就换行
  </div>
  <div style="flex: 1 1 280px; background: #2ecc71; color: white; padding: 20px; border-radius: 8px;">
    卡片 2
  </div>
  <div style="flex: 1 1 280px; background: #e74c3c; color: white; padding: 20px; border-radius: 8px;">
    卡片 3
  </div>
  <div style="flex: 1 1 280px; background: #f39c12; color: white; padding: 20px; border-radius: 8px;">
    卡片 4
  </div>
</div>

6. 粘性页脚 —— 内容不够时页脚置底

<div style="display: flex; flex-direction: column; min-height: 100vh;">
  <header style="padding: 20px; background: #333; color: white;">头部</header>
  <main style="flex: 1; padding: 20px;">主体内容（flex:1 占满剩余空间）</main>
  <footer style="padding: 20px; background: #333; color: white;">页脚</footer>
</div>

flex 属性详解（flex: 1 到底是什么意思？）

/* flex 是 flex-grow flex-shrink flex-basis 的简写 */
flex: 1;       /* = flex: 1 1 0%    —— 等分剩余空间 */
flex: auto;    /* = flex: 1 1 auto  —— 基于内容大小 + 等分剩余 */
flex: none;    /* = flex: 0 0 auto  —— 不伸缩，保持原始大小 */
flex: initial; /* = flex: 0 1 auto  —— 默认值，不放大但可缩小 */
/* 常见用法 */
.target {
  flex: 2;  /* 在兄弟元素中占双份空间 */
}
<!-- 三个子元素，第二个占 2 份，其余各占 1 份 → 宽度比 1:2:1 -->
<div style="display:flex">
  <div style="flex:1">25%</div>
  <div style="flex:2">50%</div>
  <div style="flex:1">25%</div>
</div>

Flexbox vs Grid 对比

对比维度	Flexbox	Grid
布局维度	一维（单行或单列）	二维（行和列同时控制）
适用场景	导航栏、工具栏、卡片列表、居中	页面整体布局、仪表盘、复杂网格
内容还是布局优先	内容驱动（Content-first）—— 项目大小影响布局	布局驱动（Layout-first）—— 先定义网格再放内容
换行行为	flex-wrap 控制，换行后每行独立	按列数和行数固定，超出自动换到下一行
对齐能力	每条轴独立对齐	每个网格区域都可以独立对齐
兼容性	IE11 部分支持（有 bug）	IE11 支持旧语法（-ms- 前缀）

经验法则：如果只是在一行或一列中排东西 → Flexbox；如果需要同时控制行和列 → Grid；两者可以嵌套使用！

???? 练习任务

1. 用 Flexbox 实现一个水平导航栏：Logo 靠左，菜单项靠右，所有项目垂直居中
2. 用 Flexbox 实现一个"圣杯布局"：两侧固定宽度侧边栏 + 中间自适应主内容区
3. 用 flex-wrap: wrap 实现一个自适应卡片网格（每张卡片最小 250px）
4. 用 Flexbox 实现页面"粘性页脚"效果（内容少时页脚在底部，内容多时跟随内容）
5. 分别测试 flex: 1、flex: auto、flex: none 的行为差异
6. 用 align-self 让一个项目有不同的交叉轴对齐方式
7. 用 order 属性在不改 HTML 顺序的情况下调整视觉顺序