CSS盒子模型：详解display属性用法和弹性布局

忆序

404人浏览 · 2026-05-24 17:57:35

忆序 · 2026-05-24 17:57:35 发布

一、盒子的display属性：用于元素性质的转换

display 属性是CSS中控制元素显示类型的核心，它直接决定了元素在文档流中的表现形式，是块级、行内，还是其他特殊类型。

inline：以行内元素展示

inline-block：以行内块元素展示

block：以块元素展示

none：隐藏元素（但不是删除）

一个代码示例：

<!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;
            /* 隐藏元素 */
            /* display: none; */

            /* 强行设置为普通行内元素，
            宽高不能自行设置，其宽高仅由内容撑起 */
            /* display: inline; */
            /* 强行设置为行内块元素，通过配置成inline-block，
            宽高可以自行设置 */
            /* display: inline-block; */
        }
        #div2 {
            width: 200px;
            height: 80px;
            background-color: blue;
            border: 2px black solid;

            /* 行内元素，宽高不能设置，只能有默认的宽高 */
            /* display: inline; */
            /* 强行设置为行内块元素，通过配置成inline-block，
            宽高可以自行设置 */
            /* display: inline-block; */
        }

        b {
            width: 200px;
            height: 80px;
            background-color: pink;
            border: 2px black solid;
            /* 强行配置为块元素，宽高可以设置 */
            /* display: block; */
            /* 强行设置为行内块元素，通过配置成inline-block，
            宽高可以自行设置 */
            /* display: inline-block; */
        }
    </style>

</head>

<body>
    <div class="container">
        <!-- 普通块元素 -->
        <div id="div1">盒子1</div>
        <div id="div2">盒子2</div>
    
        <!-- 普通行内元素 -->
        <b>盒子3</b>
        <b>盒子4</b>
    </div>
</body>

</html>

为什么我给<b>元素里面的盒子设置了宽高，却没有效果呢？

因为我们display默认是inline（行内元素），行内元素是无法直接设置宽高的，所以我们写的代码会被忽视掉，但是我们可以：

1.强行配置为块元素

两个盒子各占一行，宽高设置生效，是典型的块级元素表现

 /* 强行配置为块元素，宽高可以设置 */
            display: block;

2.强行配置为行内块元素

两个盒子并排显示，同时宽高设置正常生效

   /* 强行设置为行内块元素，通过配置成inline-block，
            宽高可以自行设置 */
             display: inline-block;

二、弹性布局（Flex）

1.什么是Flex布局？

Flexbox 是 CSS3 引入的一种一维布局模型，旨在提供更高效的方式来布局、对齐和分配容器内项目的空间核心概念包括：容器与项目、主轴与交叉轴、空间分配、对齐方式。

详解如下：

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

<head>
    <!-- 【Flex 布局核心概念与机制】
    Flexbox 是 CSS3 引入的一种一维布局模型，旨在提供更高效的方式来布局、对齐和分配容器内项目的空间。
    其核心概念包括：
    容器与项目：采用 Flex 布局的元素称为 Flex 容器，其内部的子元素称为 Flex 项目。
    主轴与交叉轴：Flex 容器有两根轴，主轴由flex-direction定义，交叉轴垂直于主轴。
    对齐方式：justify-content 控制主轴对齐，align-items 和 align-content 控制交叉轴对齐。
    空间分配：通过 flex-basis、flex-grow 和 flex-shrink 控制项目在主轴上的初始大小、放大和缩小比例。
    -->

    <meta charset="UTF-8">
    <title>Flex布局示例1 - 基本容器（按照默认规则排列）</title>
    <style>
        .container {
            /* ===== 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; */

            border: 2px solid #aaa;
            width: 600px;
            height: 300px;
            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 class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
        <div class="item">项目1</div>
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
        <div class="item">项目1</div>
    </div>
</body>

</html>

2.Flex布局常用属性

3.主轴和交叉轴

下面分享

3.1主轴上对齐方式的代码：

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

<head>
    <meta charset="UTF-8">
    <title>Flex布局示例3 - justify-content（主轴对齐方式）</title>
    <style>
    .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>

下面是解除代码注释后的效果：

3.2交叉轴方向的对齐方式（含换行控制）

  <style>
     
    /* 定义flex容器的基础样式 */
    .container {
      /* 将容器设置为flex布局 */
      display: flex; 
      /* 容器宽度固定，控制换行效果 */
      width: 500px; 
       /* 容器高度固定，为交叉轴留出空间 */
      height: 250px;
      /* 容器边框，方便观察整体范围 */
      border: 2px solid #333; 
      /* 容器之间的外边距，避免拥挤 */
      margin: 10px; 
      /* 强制换行：当项目总宽度超过容器时自动换行，产生多行 */
      flex-wrap: wrap;      
    }

    /* 
    ====== 项目样式 ======
    
    注意：本示例中项目没有 margin，所以 flex-shrink 可以正常压缩
    如果项目有 margin，margin 不会参与压缩，可能导致溢出
    */
    .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>
  <!-- 
  ====== align-content vs align-items 区别 ======
  
  本页面展示了 align-content 的效果：
  
  注意：由于 flex-wrap 被注释掉，项目没有真正换行！
  所以本示例中 align-content 实际上不生效（只有一行）。
  如果想看真正的多行对齐效果，需要取消注释 flex-wrap: wrap;
  
  重要区别：
  - align-items: 作用于"单行"内的所有项目（垂直方向的对齐）
  - align-content: 作用于"多行"整体（多行作为一个整体在容器中的对齐）
  
  换行相关属性：
  - flex-wrap: nowrap (默认) → 不换行
  - flex-wrap: wrap         → 换行
  -->
  
  <h1>多行项目在容器交叉轴方向上的对齐方式</h1>
  
  <!-- 
  第一个容器没有设置 align-content，所以使用默认值 stretch
  由于没有换行（flex-wrap 被注释），所以 align-content 实际不生效
  -->
  <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>

  <!-- 2. align-content: center -->
  <!-- 效果：所有行作为一个整体，在容器垂直方向居中 -->
  <p>align-content: center（所有行整体在交叉轴中间/垂直居中）</p>
  <div class="container" style="align-content: center;">
    <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>

  <!-- 3. align-content: flex-end -->
  <!-- 效果：所有行靠容器底部对齐 -->
  <p>align-content: flex-end（所有行整体靠交叉轴终点/底部）</p>
  <div class="container" style="align-content: flex-end;">
    <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>

  <!-- 4. align-content: space-between -->
  <!-- 效果：第一行靠顶，最后一行靠底，行之间间距相等 -->
  <p>align-content: space-between（行与行之间间距相等，第一行靠顶，最后一行靠底）</p>
  <div class="container" style="align-content: space-between;">
    <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>

  <!-- 5. align-content: space-around -->
  <!-- 效果：每行上下间距相等，整体与容器边缘也有间距 -->
  <p>align-content: space-around（行上下都有相等间距，整体与容器边缘也有间距）</p>
  <div class="container" style="align-content: space-around;">
    <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>

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

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

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

可选值：

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

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

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

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

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

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

多行项目在容器交叉轴方向的对齐方式（含换行控制）：

====== 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 → 换行，但反向显示（第一行在底部）

4.项目的大小和缩放控制

====== flex-basis（基础尺寸）======

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

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

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

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

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

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

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

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

示例代码：

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

- 容器宽度：500px

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

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

  <p>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>

====== 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（正好填满容器）

<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>

===== 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（正好等于容器宽度）

<p> 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>

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

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

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

简写形式：

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

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

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

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

昇腾NPU监控与可观测性——让AI基础设施“被看见“（完整版）

AtomGit开源社区

【AI】Tika：一次文档解析引擎的工程实践

AtomGit开源社区

【摸鱼吃瓜】天庭云人才生态圈

我（Client） -> 老王（Edge Node） -> 某局长（Core Router） -> 大领导（Mainframe）。我们要做的是**无状态（Stateless）**交易，不留痕。，一直在登录（Login）界面卡着，无法鉴权（Authorization）通过。老王（骗子） -> 老王的赌友（假扮局长） -> 空气（并不存在的大领导）。他只是在我的**Localhost（本地环境）**里