盒子的display属性和Flex弹性盒模型，内容多样，精彩不限，快来瞧一瞧吖~

梓雨枔

405人浏览 · 2026-05-23 23:19:07

梓雨枔 · 2026-05-23 23:19:07 发布

对于盒子的display属性，我们先来了解一下它的概念，display属性是用于元素性质的转换，inline 以行内元素展示，inline-block 以行内块元素展示，block 以块元素展示，none隐藏元素(但不是删除)。就比如在网页中，对于盒子的展示来说，一个父盒，被他包含的子盒必须遵从的排列规则如下：1、块元素，从上到下2、行内元素，从左到右。

在设置块元素和行内元素的盒子中，强行设置为普通行内元素，宽高不能自行设置，其宽高仅由内容撑起 display: inline;强行设置为行内块元素，通过配置成inline-block，宽高可以自行设置display: inline-block。在设置盒子中，首先在style里面写一个div来设置一个盒子，里面设置它的宽高和边框，还有边框的颜色和里面的颜色，这些可以按自己所需来设置，其代码如下所示：

 <style>
        #div1 {
            width: 200px;
            height: 80px;
            background-color: red;
            border: 2px black solid;
}
</style>

写完这个之后，在body里面写块元素和行内元素的内容，然后再用以上方式多写几个盒子就可以完成其网页了，其代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子的display属性：控制元素的性质</title>
    <style>
        #div1 {
            width: 200px;
            height: 80px;
            background-color: red;
            border: 2px black solid;
        }
        #div2 {
            width: 200px;
            height: 80px;
            background-color: blue;
            border: 2px black solid;
        }

            b {
            width: 200px;
            height: 80px;
            background-color: pink;
            border: 2px black solid;
         
        }
    </style>        
</head>
<body>
    <div class="container">
        <!-- 普通块元素 -->
        <div id="div1">盒子1</div>
        <div id="div2">盒子2</div>
          <!-- 普通行内元素 -->
          <b>盒子5</b>
          <b>盒子6</b>
</body>
</html>

这样子写出来的网页图片如下图所示：

讲完盒子的display属性之后，后面就是flex弹性盒模型的讲解，Flex弹性盒，指的是规则可变的父盒，此时对诸多子盒的布局，变成为父盒制定排序规则。这里面的布局包括基本容器和主轴上的对齐方式，其中还包含多行项目在容器交叉轴方向的对齐方式，后面还有项目的大小和缩放控制，项目缩放的应用场景_响应式导航栏等等。

【Flex 布局核心概念与机制】

Flexbox 是 CSS3 引入的一种一维布局模型，旨在提供更高效的方式来布局、对齐和分配容器内项目的空间。

其核心概念包括：

容器与项目：采用 Flex 布局的元素称为 Flex 容器，其内部的子元素称为 Flex 项目。

主轴与交叉轴：Flex 容器有两根轴，主轴由flex-direction定义，交叉轴垂直于主轴。

对齐方式：justify-content 控制主轴对齐，align-items 和 align-content 控制交叉轴对齐。

空间分配：通过 flex-basis、flex-grow 和 flex-shrink 控制项目在主轴上的初始大小、放大和缩小比例。

了解完这些之后，我们先来讲讲弹性flex布局—基本容器

===== Flex 容器默认规则（不写属性时的默认值）=====

1. flex-direction: row

→ 主轴方向：水平从左到右

→ 项目会水平排列成一排

2. flex-wrap: nowrap

→ 不换行（默认）

→ 项目会被压缩以适应容器宽度（除非设置 flex-shrink: 0）

→ 如果想换行，需要设置: flex-wrap: wrap

3. justify-content: flex-start

→ 主轴对齐方式：项目靠主轴起点（左）对齐

→ 其他值: flex-end(右) | center(居中) | space-between | space-around

4. align-items: stretch

→ 交叉轴对齐方式：项目会拉伸填满整个交叉轴方向

→ 前提：项目没有设置 height（或者 height 为 auto）

→ 其他值: flex-start | flex-end | center | baseline

5. align-content: normal (在单行时无效)

→ 多行项目在交叉轴方向的对齐方式

===== 项目（item）的默认规则 =====

6. flex-grow: 0

→ 默认不自动放大（当容器有剩余空间时）

→ 如果想自动放大: flex-grow: 1；

7. flex-shrink: 1

→ 默认会自动收缩（当项目总宽度超过容器时）

→ 注意：只有 width/flex-basis 参与收缩，margin/padding/border 不会收缩！

→ 如果不想收缩: flex-shrink: 0；

8. flex-basis: auto

→ 项目的基础尺寸，默认取 width 值

→ 也可以设置为具体像素: flex-basis: 100px;

通过 display:flex 将此元素强制转换为 Flex 容器

display: flex;

下面是可自行配置的灵活规则

flex-direction: row;

flex-wrap: nowrap;

justify-content: flex-start;

了解完这些之后我们在style里面用container和item属性来设置它的宽高、边框还有其颜色和其对应的位置，其代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex布局示例1 - 基本容器（按照默认规则排列）</title>
    <style>
        .container {
            display: flex;
            border: 2px solid #aaa;
            width: 200px;
            height: 200px;
            padding: 10px;
        }
        .item {
            background-color: #4CAF50;
            border: 3px solid red;
            width: 80px;
            height: 40px;
            color: white;
            text-align: center;
        }
    </style>    
</head>
<body>
    <h3>Flex容器示例（项目按照容器默认规则排列）</h3>
    <div class="container">
        <!-- 块元素：从上到下文档流排列 -->
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>     
</body>
</html>

这样子做出来的网页图片如下图所示：

讲完基本容器之后，我们就来讲讲主轴上的对齐方式

====== justify-content 属性详解 ======

作用：控制所有项目在主轴（水平方向）上的对齐方式和间距分布

前提：只有在主轴方向有剩余空间时才会生效

可选值：

1. flex-start → 项目靠主轴起点（左边）对齐（默认值）

2. flex-end → 项目靠主轴终点（右边）对齐

3. center → 项目在主轴方向居中对齐

4. space-evenly → 项目之间以及项目与容器边缘的间距完全相等

5. space-between → 项目之间间距相等，但首尾项目紧贴容器边缘

6. space-around → 项目两侧的外边距相等（项目之间间距是边缘间距的2倍）

====== 项目样式 ======

简单设置项目的尺寸和外观，用item属性写。

然后在body里面写其相关内容就可以完成以上关于主轴上的对齐方式的网页了，其代码和网页图片如下图所示：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Flex布局示例3 - justify-content（主轴对齐方式）</title>
    <style>
        /* 
        ====== justify-content 属性详解 ======
        
        作用：控制所有项目在主轴（水平方向）上的对齐方式和间距分布
        前提：只有在主轴方向有剩余空间时才会生效
        
        可选值：
        1. flex-start     → 项目靠主轴起点（左边）对齐（默认值）
        2. flex-end       → 项目靠主轴终点（右边）对齐
        3. center         → 项目在主轴方向居中对齐
        4. space-evenly   → 项目之间以及项目与容器边缘的间距完全相等
        5. space-between → 项目之间间距相等，但首尾项目紧贴容器边缘
        6. space-around   → 项目两侧的外边距相等（项目之间间距是边缘间距的2倍）
        */
        
        .container {
            display: flex;
            border: 2px solid #a00;
            padding: 10px;
            height: 100px;
        }
        
        /* 
        ====== 项目样式 ======
        简单设置项目的尺寸和外观
        */
        .item {
            background-color: #4CAF50;
            border: 3px solid red;
            width: 80px;
            height: 40px;
            color: white;
            /* margin: 5px;
            padding: 20px; */
            text-align: center;
        }
    </style>
</head>

<body>


    <h1>justify-content（控制主轴对齐方式）</h1>
    <!-- justify-content属性的六种取值，控制项目在主轴上的对齐方式和间距分布。  -->
    <h3>justify-content: flex-start 项目在容器中，以主轴起点对齐（默认值）</h3>
    <div class="container" style="justify-content: flex-start;">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>

    <h3>justify-content: flex-end 项目在容器中，以主轴终点对齐</h3>
    <div class="container" style="justify-content: flex-end;">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
<!-- 
    <h3>justify-content: center 项目在容器中，以主轴居中对齐</h3>
    <div class="container" style="justify-content: center;">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>

    <h3>justify-content: space-evenly 项目在容器中均匀分布</h3>
    <div class="container" style="justify-content: space-evenly;">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>

    <h3>justify-content: space-between 项目在容器中均匀分布，但首尾项目紧贴容器边缘</h3>
    <div class="container" style="justify-content: space-between;">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>

    <h3>justify-content: space-around 项目在容器中均匀分布，但每个项目两侧外边距相等</h3>
    <div class="container" style="justify-content: space-around;">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div> -->
</body>

</html>

后面我们就来讲讲多行项目在容器交叉轴方向的对齐方式

====== align-content 属性详解 ======

作用：控制多行项目在交叉轴（垂直方向）上的对齐方式

重要前提：

1. 必须先使用 flex-wrap: wrap 换行（产生多行）

2. 只有一行时，align-content 无效

3. 只有在交叉轴方向有剩余空间时才会生效

可选值：

1. flex-start → 所有行靠交叉轴起点（顶部）对齐

2. flex-end → 所有行靠交叉轴终点（底部）对齐

3. center → 所有行在交叉轴方向居中对齐

4. space-between → 行之间间距相等，首行靠顶，末行靠底

5. space-around → 行上下间距相等，整体与容器边缘也有间距

6. stretch → 默认值，行拉伸填满剩余空间（行内项目也会被拉伸）

====== flex-wrap 属性说明 ======

可选值：

1. nowrap (默认) → 不换行，项目会被压缩以适应容器

2. wrap → 换行，项目超出容器时自动换到下一行

3. wrap-reverse → 换行，但反向显示（第一行在底部）

====== 项目样式 ======

注意：本示例中项目没有 margin，所以 flex-shrink 可以正常压缩

如果项目有 margin，margin 不会参与压缩，可能导致溢出

在body里面可以设置它的方向

====== align-content vs align-items 区别 ======

本页面展示了 align-content 的效果：

注意：由于 flex-wrap 被注释掉，项目没有真正换行！

所以本示例中 align-content 实际上不生效（只有一行）。

如果想看真正的多行对齐效果，需要取消注释 flex-wrap: wrap

重要区别：

- align-items: 作用于"单行"内的所有项目（垂直方向的对齐）

- align-content: 作用于"多行"整体（多行作为一个整体在容器中的对齐）

换行相关属性：

- flex-wrap: nowrap (默认) → 不换行

- flex-wrap: wrap → 换行

其代码和网页图片如下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex布局示例6 - 多行项目在容器交叉轴方向的对齐方式（含换行控制）</title>
    <style>
    
        /* 定义flex容器的基础样式 */
        .container {
          /* 将容器设置为flex布局 */
          display: flex; 
          /* 容器宽度固定，控制换行效果 */
          width: 500px; 
           /* 容器高度固定，为交叉轴留出空间 */
          height: 250px;
          /* 容器边框，方便观察整体范围 */
          border: 2px solid #333; 
          /* 容器之间的外边距，避免拥挤 */
          margin: 10px; 
          /* 强制换行：当项目总宽度超过容器时自动换行，产生多行 */
          flex-wrap: wrap;      
        }
    
        .item {
          /* 项目宽度 */
          width: 160px; 
          /* 项目高度 */
          height: 40px; 
          /* 项目边框 */
          border: green solid 1px; 
          /* 文字颜色 */
          color: red; 
          /* 文字水平居中 */
          text-align: center; 
          /* 项目外边距（注释掉，为了让 flex-shrink 正常压缩）*/
          /* margin: 5px;  */
        }
    
        /* 标题样式 */
        p { 
          margin: 20px 0 5px 10px;
        }
      </style>
</head>
<body>
    <h1>多行项目在容器交叉轴方向上的对齐方式</h1>
    <p>align-content: flex-start（所有行整体靠交叉轴起点/顶部）</p>

    <div class="container" style="align-content: flex-start;">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
    </div>
</body>
</html>

除了在顶部的方向，还有其他不同的方向，大家可以按照上面的内容来设置自己所需要的方向。

讲完其多行项目在容器交叉轴方向的对齐方式之后，就剩下两个内容了，这两个内容是项目的大小和缩放控制，还有项目缩放的应用场景_响应式导航栏。

首先是项目的大小和缩放控制

====== 基础容器样式 ======

- display: flex：开启Flex布局

- height: 80px：固定高度，方便观察项目在垂直方向的对齐

- border: 10px solid #333：边框用于看清容器的实际范围

====== 项目基础样式 ======

- height: 100%：让项目高度占满整个容器高度

- color: white：白色文字

- text-align: center：文字水平居中

====== 实验1：flex-basis（基础尺寸）======

flex-basis：定义项目在主轴方向上的初始大小

- 相当于给项目设置了一个"理想尺寸"

- 优先级高于 width（如果同时设置的话）

- 默认值：auto（会使用项目的 width 值）

本实验：两个项目分别设置为 100px 和 200px

- 容器宽度：500px

- 项目总宽度：100 + 200 = 300px < 500px

- 没有剩余空间，也没有超出，所以保持原大小

====== 实验2：flex-grow（放大比例）======

flex-grow：定义项目在有剩余空间时的放大比例

- 默认值：0（不放大）

- 只有当容器有剩余空间时才会生效

- 剩余空间按各项目 flex-grow 值的比例分配

本实验：

- 容器宽度：500px

- 项目初始宽度：100 + 100 = 200px

- 剩余空间：500 - 200 = 300px

- flex-grow 比例：1 : 2（项目1得1份，项目2得2份）

- 总份数：1 + 2 = 3份

- 每份大小：300 ÷ 3 = 100px

计算结果：

- 项目1实际宽度：100 + (1 × 100) = 200px

- 项目2实际宽度：100 + (2 × 100) = 300px

- 验证：200 + 300 = 500px（正好填满容器）

====== 实验3：flex-shrink（缩小比例）======

flex-shrink：定义项目在空间不足时的缩小比例

- 默认值：1（会自动缩小）

- 设置为 0 表示禁止缩小

- 空间不足时，按各项目 flex-shrink 值的比例分配压缩量

- 注意：margin、padding、border 不参与压缩！

本实验：

- 容器宽度：300px

- 项目初始宽度：200 + 200 = 400px

- 超出空间：400 - 300 = 100px

- flex-shrink 比例：1 : 3（项目1得1份，项目2得3份）

- 总份数：1 + 3 = 4份

- 每份压缩量：100 ÷ 4 = 25px

计算结果：

- 项目1实际宽度：200 - (1 × 25) = 175px

- 项目2实际宽度：200 - (3 × 25) = 125px

- 验证：175 + 125 = 300px（正好等于容器宽度）

====== 三个属性的默认值和记忆技巧 ======

| 属性 | 默认值 | 作用 | 记忆技巧 |

|------------|--------|----------------------|--------------------|

简写形式：

- flex: 1; 等于 flex: 1 1 0%;

- flex: 1 1 auto; 等于 flex: auto;

- flex: 0 0 100px; 固定100px，不放大也不缩小

其代码和网页图片如下图所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Flex布局示例5 - 项目的大小和缩放控制</title>
  <style>
    .flex-container {
      display: flex;
      height: 80px;
      border: 10px solid #333;
      margin: 20px 0;
    }
    .item {
      height: 100%;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <p>【实验1】 flex-basis 初始大小（100px 和 200px，无放大缩小）</p>
  <div class="flex-container" style="width: 500px;">
    <div class="item" style="flex-basis: 100px; background: #f44336;">100px</div>
    <div class="item" style="flex-basis: 200px; background: #4caf50;">200px</div>
  </div>

  <p>【实验2】flex-grow 放大（初始各100px，总剩余300px，按1:2分配）</p>
  <div class="flex-container" style="width: 500px;">
    <div class="item" style="flex-basis: 100px; flex-grow: 1; background: #2196f3;">grow:1</div>
    <div class="item" style="flex-basis: 100px; flex-grow: 2; background: #ff9800;">grow:2</div>
  </div>

  <p>【实验3】 flex-shrink 缩小（初始各200px，总超出100px，按1:3承担）</p>
  <div class="flex-container" style="width: 300px;">
    <div class="item" style="flex-basis: 200px; flex-shrink: 1; background: #9c27b0;">shrink:1</div>
    <div class="item" style="flex-basis: 200px; flex-shrink: 3; background: #e91e63;">shrink:3</div>
  </div>
</body>
</html>

最后是项目缩放的应用场景_响应式导航栏

====== 响应式导航栏 - 典型应用场景 ======

flex-basis、flex-grow、flex-shrink 是实现灵活布局的核心工具，

尤其适合需要「自适应容器空间」的场景。

【典型场景】：响应式导航栏

导航栏通常包含「Logo、菜单选项、操作按钮」，需要在不同屏幕尺寸下自动调整布局：

- 大屏幕时：元素均匀分布，充分利用空间

- 中等屏幕时：菜单选项自动收缩，避免换行

- 小屏幕时：优先保证关键元素（如 Logo 和按钮）显示，次要菜单适当压缩

====== 导航栏布局设计思路 ======

1. Logo（左侧）

- flex-basis: 120px → 初始宽度120px

- flex-grow: 0 → 不放大（保持固定宽度）

- flex-shrink: 0 → 不缩小（保证Logo始终可见）

2. 菜单（中间）

- flex-basis: 0 → 初始宽度为0（不占用固定宽度）

- flex-grow: 1 → 占据所有剩余空间（自动填充）

- flex-shrink: 1 → 空间不足时允许收缩

3. 按钮（右侧）

- flex-basis: 80px → 初始宽度80px

- flex-grow: 0 → 不放大

- flex-shrink: 0.5 → 允许轻微收缩，但收缩比例较小

测试方法：运行后在浏览器按F12，打开开发者工具，然后调整浏览器窗口宽度，观察导航栏的变化。

Logo区域

- flex: 0 0 120px 的简写形式

- 固定120px宽度，既不放大也不缩小

- 确保品牌标识始终清晰可见

中间菜单区域

- flex: 1 1 0 的简写形式

- flex-basis: 0 表示初始不占宽度，完全依靠 flex-grow 填充剩余空间

- 当屏幕变小时，这个区域会优先收缩

右侧按钮区域

- flex: 0 0.5 80px 的简写形式

- flex-shrink: 0.5 表示允许收缩，但只承担一半的收缩比例

- 这样在极端情况下，按钮会被压缩但不会完全消失

其代码和网页图片如下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-basis、flex-grow、flex-shrink的典型应用</title>
</head>
<body>
    
    <!-- 
    ====== 完整导航栏代码 ======
    -->
    <div style="display: flex; align-items: center; height: 60px; padding: 0 20px; background: #333; color: white;">
       
        <div style="flex-basis: 120px; flex-grow: 0; flex-shrink: 0; font-weight: bold;">LOGO</div>
      
        <div style="flex-basis: 0; flex-grow: 1; flex-shrink: 1; margin: 0 20px;">
          <div style="display: flex; gap: 15px;">
            <span>首页</span>
            <span>产品</span>
            <span>关于我们</span>
            <span>联系</span>
          </div>
        </div>  
        <div style="flex-basis: 80px; flex-grow: 0; flex-shrink: 0.5; text-align: center;">登录</div>
    </div>
    
    <!-- 
    ====== 完整代码解析 ======
    
    总结：
    使用 flex: 0 0 120px 可以一次性设置三个属性
    
    | 元素   | flex-grow | flex-shrink | flex-basis | 效果                              |
    |--------|-----------|-------------|------------|-----------------------------------|
    | Logo   | 0         | 0           | 120px      | 固定宽度，不变化                  |
    | 菜单   | 1         | 1           | 0          | 自动填充剩余空间                  |
    | 按钮   | 0         | 0.5         | 80px       | 固定宽度，允许轻微收缩            |
    -->
</body>
</html>