CSS 弹性盒子怎么布局？导航栏、换行卡片与居中的三个实例

你用 Flex 布局时，先确定主轴方向，再处理对齐和子项伸缩。导航栏可以用自动外边距推开按钮，卡片需要允许换行，垂直居中则必须先给容器留出可分配的高度。

Flex 布局用三种页面看懂空间

同样写了 display:flex，有的导航正常，有的长标题却把按钮挤出屏幕；卡片设置了宽度，窗口变窄后仍不换行；居中属性全部写上，看起来也没变化。原因通常藏在默认值里：子项默认不换行，内容有最小尺寸，而父容器可能根本没有多余空间。本文用三个独立页面把这些条件逐个拆开。编程狮示例使用现代浏览器支持的 Flexbox 和 gap，保存为 HTML 即可观察，不需要安装框架。

一、Flex 布局先认两条轴，再看剩余空间

主轴由 flex-direction 决定，row 时沿行方向，column 时沿列方向。justify-content 在主轴上分配空间，align-items 控制交叉轴对齐。把“justify 永远水平、align 永远垂直”记成口诀，一改 column 就会出错。

对齐还需要空间。父容器高度与内容高度相同时，没有多余的垂直空间可供分配；按钮本身占满主轴时，space-between 也不会凭空制造间距。这些属性负责分配已有空间，不负责保证容器一定足够大。

另一个要点是 Flex 的直接子元素才是弹性项目。把 display:flex 写在祖父容器上，并不会自动让孙子元素互相排布。浏览器开发者工具中的布局高亮可以帮助你确认容器、项目和两条轴的位置，再决定该把属性写在哪里。

如果你刚开始接触样式规则，可以先用 CSS 教程理解选择器与盒模型。后面的三个案例都把容器宽度、间距和项目最小尺寸写明，方便你通过改变一项属性观察结果。

二、实例一：导航栏里让搜索入口始终留在右边

下面页面左侧是较长的品牌名称，右侧是按钮。自动外边距吸收可用空间，把按钮推向末端；min-width:0 允许标题项目缩小，省略号才有机会生效。

<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>编程狮导航布局练习</title>
<style>
* { box-sizing: border-box; }
body { margin: 24px; font: 16px sans-serif; }
.nav { display: flex; align-items: center; gap: 16px;
       padding: 16px; background: #fff3e8; }
.brand { min-width: 0; overflow: hidden;
         white-space: nowrap; text-overflow: ellipsis; }
.search { margin-left: auto; flex-shrink: 0; padding: 8px 16px; }
</style>
<nav class="nav" aria-label="主导航">
  <strong class="brand">编程狮：程序员的每日练习与学习记录</strong>
  <button class="search">搜索</button>
</nav>
</html>

把窗口从宽屏缩到三百二十像素，按钮仍应完整显示，标题逐渐缩短并出现省略号。这里 overflow:hidden 也会影响自动最小尺寸，因此只去掉 min-width:0 不一定出现变化。要观察内容撑开项目，可同时去掉这两项再比较。按钮设置 flex-shrink:0，是为了保留它的可读尺寸，不是要求整个导航永不溢出。

如果按钮多到最窄屏幕也装不下，应切换导航结构或允许换行，而不是把字体无限缩小。自动外边距与 space-between 都能分开两端内容，但自动外边距更适合指定“从哪个元素开始推开”，例如多个左侧菜单之后再推右侧入口。

三、实例二：让课程卡片换行，而不是被挤成细条

Flex 默认不换行，因此只给子项宽度并不能保证自动分成多行。这个案例明确使用 flex-wrap，并把每张卡片的基础尺寸设为二百二十像素。

<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>课程卡片换行练习</title>
<style>
* { box-sizing: border-box; }
body { margin: 24px; font: 16px sans-serif; }
.cards { display: flex; flex-wrap: wrap; gap: 16px; }
.card { flex: 1 1 220px; min-width: 0; padding: 24px;
        border: 1px solid #fe6a00; border-radius: 12px;
        overflow-wrap: anywhere; }
</style>
<main class="cards">
  <article class="card">Python：读取学习记录</article>
  <article class="card">JavaScript：制作交互表单</article>
  <article class="card">CSS：完成响应式布局</article>
</main>
</html>

flex 的三个值依次控制增长比例、收缩权重和基础尺寸。这里的 1 1 220px 表示可以增长，也可以收缩，分行前以指定基础尺寸参与计算。gap 由容器负责间距，不会在外侧额外增加一圈外边距。

要注意，最后一行只有一张卡片时，它会因为允许增长而铺满剩余行。若你期待每行列宽严格一致，甚至跨行对齐，Grid 往往更贴合这个需求。Flex 适合沿一条主轴组织项目，并不保证不同换行之间形成固定二维网格。

卡片高度不同时，默认的交叉轴拉伸可能让同一行等高。这不意味着整个卡片内部内容自动居中；内部还需要自己的排版。检查属性默认值时可以对照 CSS 参考手册，避免用额外高度掩盖结构问题。

四、实例三：居中弹窗内容，先给容器一个高度

下面示例让一个提示面板处于视口区域中央。min-height 给容器提供最小高度，内容更高时仍可把页面撑开，避免固定高度导致内容被裁切。

<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Flex 居中练习</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; font: 16px sans-serif; }
.stage { min-height: 100vh; display: flex; padding: 24px;
         align-items: center; justify-content: center; background: #fff7f0; }
.panel { max-width: 480px; padding: 32px; background: white;
         border: 2px solid #fe6a00; border-radius: 16px; }
</style>
<main class="stage">
  <section class="panel">
    <h1>今日练习已完成</h1>
    <p>保存代码，再缩放窗口观察布局是否仍然可读。</p>
  </section>
</main>
</html>

如果把主轴改成 column，这个例子仍在两个方向居中，但两个对齐属性所负责的方向已经交换。练习时可以只保留一个属性，观察变化，而不是一次写上所有可能相关的规则。

移动设备上，浏览器地址栏伸缩会影响视口高度体验。需要更精确处理动态视口时，可研究 dvh 等单位及目标浏览器支持情况；本文保留常见的 vh 写法，不把移动地址栏变化误诊为 Flex 失效。

验收时不要只看一张桌面截图。先在宽屏检查面板左右留白是否接近，再缩到手机宽度检查文字是否换行；最后增加段落，确认页面能够滚动到内容末尾。布局通过的条件应是内容始终可读，而不是每种尺寸下都保持同一个像素位置。轴向与空间分配规则可对照 MDN 弹性盒子基础。

同样是 Flex，空间约定不同

总结

三个 Flex 布局案例分别解决“把某个入口推到末端”“让项目按空间换行”“在有高度的容器里居中”。共同顺序都是先找容器与直接子项，再确认两条轴，最后检查可用空间和最小尺寸。

你可以把导航标题加长、把卡片数量改成四张、把提示段落扩展到两屏，观察布局在哪个边界开始不符合预期。这个过程比背属性组合更有效：它会告诉你什么时候该允许收缩、什么时候需要换行，以及什么时候需求已经更适合 Grid。

延伸学习

配合 CSS3 弹性盒子视频教程练习属性变化。
查阅 CSS3 教程，补齐相关布局知识。
阅读水平垂直居中的四种方法，比较 Flex 与其他居中方案。

常见问题

Q：为什么 align-content 写了没有变化？

A：它主要用于有多条弹性行且交叉轴存在剩余空间的情况。单行或没有剩余空间时，看不到你期望的分配效果，应先检查换行和容器尺寸。

Q：设置 order 可以改变键盘访问顺序吗？

A：不应依赖它实现这个目的。order 改变视觉排列，文档顺序仍影响阅读和键盘导航。应优先把 HTML 按合理的逻辑顺序组织。

Q：所有地方都可以直接写 flex:1 吗？

A：不建议。缩写会同时影响增长、收缩和基础尺寸。遇到固定按钮、长文本、卡片换行时，明确写出三个值更容易解释，也更便于复现布局问题。