跟着 MDN 学CSS day_40：（Flexbox实战技能测试）

本文基于MDN Flexbox技能测试真题，深度解析弹性盒子在前端高频布局场景中的实战用法，核心覆盖三大核心场景：导航栏等间距布局、自适应等分列布局、弹性换行自适应布局。每一部分均包含需求分析、完整代码方案、底层原理拆解，同时梳理核心属性关联逻辑，帮助建立完整的Flexbox布局知识体系。

一、导航栏的等间距分布与 justify-content 应用

1. 需求与初始状态

本题核心需求：将垂直堆叠的导航列表，改造为水平单行排列，且所有导航项之间间距完全均等，首尾项贴合容器边缘。

初始HTML结构为nav容器包裹ul列表，列表项li默认垂直排列，链接标签设置display: inline-block仅优化点击区域，不改变列表默认垂直布局特性。

html 复制代码

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About Us</a></li>
    <li><a href="/products">Our Products</a></li>
    <li><a href="/contact">Contact Us</a></li>
  </ul>
</nav>

2. 完整解决方案

仅需为父容器ul添加两行Flex核心样式，即可实现需求，代码极简且兼容性良好：

css 复制代码

nav ul {
  display: flex;
  justify-content: space-between;
}

3. 底层原理解析

display: flex ：将ul转换为弹性容器，其直接子元素li自动成为弹性项。Flex容器默认主轴为水平方向（flex-direction: row），直接让原本垂直堆叠的li转为水平单行排列，解决布局方向问题。

justify-content: space-between：控制弹性项在水平主轴的剩余空间分配规则。核心特性为：首项紧贴容器主轴起始边缘、末项紧贴容器主轴结束边缘、中间所有项目均匀均分剩余空间，保证相邻导航项间距完全一致，完美适配导航栏两端对齐、中间均分的设计需求。

4. 关键细节与属性区分

本题要求导航项单行展示，因此禁止设置flex-wrap: wrap，容器最大宽度限制可保证所有项目正常单行展示。同时需区分易混淆主轴对齐属性：

space-between：容器两端无留白，首尾项贴边，中间间距均等，是企业级导航栏最常用方案；
space-around：每个项目两侧均分留白，会导致容器两端出现半间距空白，视觉上无法贴边；
space-evenly：所有项目之间、容器两端间距完全均等，适用于需要全局均匀留白的布局场景。

二、等分列的Flex比例控制与差异化缩放

1. 需求与初始问题

本题核心需求：三个内容长度差异极大的列表项，忽略内容多少，强制实现等宽并列布局；附加需求：实现首项宽度为其他项的两倍。

若仅设置display: flex，弹性项会默认根据自身内容宽度自适应展示，内容多的项宽度更大、内容少的项更窄，无法实现均等分列效果。

html 复制代码

<ul>
  <li>I am small</li>
  <li>I have more content than the very small item.</li>
  <li>I have lots of content. So much content that I don't know where it is all going to go.</li>
</ul>

2. 基础等宽解决方案

通过flex: 1强制重置弹性项尺寸计算规则，实现完全等分列：

css 复制代码

ul {
  display: flex;
}

li {
  flex: 1;
}

3. 核心属性底层机制

flex: 1是缩写属性，完整等价于 flex: 1 1 0，三个参数分别对应 flex-grow（增长比例）、flex-shrink（收缩比例）、flex-basis（基础尺寸）：

flex-grow: 1：所有项目增长权重一致；
flex-shrink: 1：空间不足时均等收缩；
flex-basis: 0：核心关键，将所有项目的初始基础尺寸置为0，所有容器剩余空间完全按照增长比例分配，彻底摆脱内容长度对宽度的影响。

因此三个li会均分容器全部宽度，实现绝对等宽。对比 flex: 1 1 auto，后者会先根据内容计算基础宽度，再分配剩余空间，无法消除内容差异，不能实现精准等分。

4. 差异化比例缩放（附加需求）

如需让第一个列表项宽度为其他项的两倍，仅需修改首项的flex权重值，无需改动其他样式：

css 复制代码

ul {
  display: flex;
}

li {
  flex: 1;
}

/* 首项权重改为2 */
li:first-child {
  flex: 2;
}

此时总权重为 2+1+1=4，首项占用2/4（1/2）宽度，后两项各占用1/4宽度，且因基础尺寸仍为0，宽度比例完全固定，不受内容长短干扰。

三、flex-wrap换行与定宽容器的自适应排列

1. 需求与初始状态

本题核心需求：固定宽度容器内的多个列表项，自动实现自适应换行，单行容纳尽可能多的项目，超出宽度的项目自动折行，适配不同内容宽度的子元素。

容器ul固定宽度450px，包含10个内容长短不一的li，默认垂直堆叠；仅开启flex水平排列时，所有项目会强制挤压在单行，出现内容溢出、元素压缩变形问题。

html 复制代码

<ul>
  <li>Turnip</li>
  <li>greens</li>
  <li>yarrow</li>
  <li>ricebean</li>
  <li>rutabaga</li>
  <li>endive</li>
  <li>cauliflower</li>
  <li>sea lettuce</li>
  <li>kohlrabi</li>
  <li>amaranth</li>
</ul>

2. 自适应换行解决方案

通过 flex-wrap: wrap 开启弹性容器换行能力，实现自适应多行布局：

css 复制代码

ul {
  width: 450px;
  display: flex;
  flex-wrap: wrap;
}

3. 布局原理详解

Flex容器默认换行规则为 flex-wrap: nowrap，强制所有弹性项单行排列，空间不足时会压缩元素或溢出容器。

设置 flex-wrap: wrap 后，浏览器会自动计算单行可容纳的项目数量：根据容器固定宽度、子元素内外边距、内容自适应宽度，自动将无法容纳的项目折行至新行，每行独立计算布局，不会跨行分配空间。

4. 实战场景与拓展技巧

该方案广泛应用于标签列表、筛选栏、关键词展示、图文卡片等自适应布局场景，无需手动计算行数，完全由浏览器自适应适配窗口尺寸。

常用组合拓展：可搭配 justify-content: space-around/center 实现行内项目均匀分布；需注意，换行场景下慎用全局 flex: 1，否则最后一行少量项目会被强制拉伸，破坏视觉美观，需根据设计需求权衡使用。

四、Flexbox三大核心属性关联体系梳理

三道实战题目覆盖了Flexbox布局的核心能力，三大属性各司其职、相互配合，构成完整的弹性布局逻辑，是复杂页面布局的基础：

1. justify-content：控制项目分布，不改变元素尺寸

该属性仅作用于主轴剩余空间的分配方式，不会修改弹性项自身的宽度、高度尺寸。主要用于单行布局的间距、对齐控制，适配导航栏、按钮组等内容自适应宽度、布局规整的场景，属性取值仅由视觉间距需求决定。

2. flex：控制元素尺寸，定义伸缩规则

这是弹性布局的核心尺寸属性，通过 flex-grow、flex-shrink、flex-basis 三位一体规则，精准控制元素的基础尺寸、放大比例、缩小比例。其中 flex-basis 是尺寸计算的核心基准，flex: 1 归零等分的特性，是实现各类等分布局、比例布局的关键。

3. flex-wrap：控制容器换行，定义布局维度

决定弹性布局是单行模式（nowrap）还是多行模式（wrap）。单行模式下，空间不足会触发 flex-shrink 压缩元素；多行模式下，元素优先换行，压缩行为弱化，主要用于响应式自适应、流式布局场景。

4. 综合实战组合逻辑

实际开发中三者常组合使用，以经典响应式卡片列表为例：通过 display: flex 开启弹性布局，flex-wrap: wrap 实现自适应换行，flex: 1 0 300px 固定卡片最小宽度并自适应均分空间，justify-content: center 优化末行对齐，兼顾适配性与视觉美观。熟练掌握属性组合规则，可高效解决90%以上的常规页面布局需求。

还在纠结 CSS 样式写得杂乱无章、布局频频踩坑？收藏此文持续跟进，后续分享 CSS 高效简写、兼容适配方案、经典布局案例、样式避坑干货，从基础样式到实战排版一站式学透，快速提升前端页面编写能力！