CSS盒子模型--display属性及Flex布局用法详解

Hyancy

399人浏览 · 2026-05-27 01:36:00

Hyancy · 2026-05-27 01:36:00 发布

CSS盒子模型

盒模型是CSS定位布局的核心布局，只有很好掌握了盒子模型及其中每个元素的用法，才能真正地控制好页面中的各个元素。

一、display属性

（一）用法：用于元素性质的转换

示例效果原型：

1.inline属性值

强行设置为普通行内元素，不单独占一行，宽高不能自行设置，其宽高仅由内容撑起。

示例代码：

 #div1 {
            width: 200px;
            height: 80px;
            background-color: red;
            border: 2px black solid;
            display: inline; 
        }

示例效果：

2.block属性值

元素以块元素形式显示，独占一行，可以设置宽度、高度、内外边距等属性。

示例代码:

#div2 {
            width: 200px;
            height: 80px;
            background-color: blue;
            border: 2px black solid;
            display: block;
        }

示例效果：

3.inline-block属性值

强行设置为行内块元素，通过配置成inline-block，宽高可以自行设置。

示例代码：

#div3 {
            width: 200px;
            height: 80px;
            background-color: green;
            border: 2px black solid;
            display: inline-block; 
        }

示例效果：

4.none属性值

使用display:none隐藏元素。

注意：是隐藏，不是删除！！！

示例代码：

   #div4 {
            width: 200px;
            height: 80px;
            background-color: yellow;
            border: 2px black solid;
            display: none;
        }

示例效果：

5.flex属性值

通过display：flex启动弹性布局。

用法下面来详细解答。

二、Flex布局

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

（一）Flex布局原理

通过给父盒添加flex属性，来控制子盒的位置排列方式。采用flex布局的父元素，称为flex容器，它的所有子元素自动称为容器成员，称为flex项目。

注意：当我们为父盒设置flex属性后，其子盒的float、clear属性中的vertical-align将失效！！！

（二）核心概念

1.容器和项目

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

（1）flex容器默认原则

I. flex-direction: row

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

→ 项目会水平排列成一排

II. flex-wrap: nowrap

→ 不换行（默认）

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

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

III. justify-content: flex-start

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

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

IV. align-items: stretch

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

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

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

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

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

（2）项目的默认规则

I. flex-grow: 0

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

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

II. flex-shrink: 1

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

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

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

III. flex-basis: auto

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

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

示例代码：

 <style>
        .container {
            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>

示例效果：

2.主轴与交叉轴

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

（1）主轴上的对齐方式

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

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

可选值：

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

示例代码：

<head>
   <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>
    <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>
</body>

示例效果：

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

示例代码：

<head>
   <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>
    <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>
</body>

示例效果：

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

示例代码：

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

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

示例效果：

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

示例代码：

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

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

示例效果：

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

示例代码：

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

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

示例效果：

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

示例代码：

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

示例效果：

（2）交叉轴的对齐方式

属性	作用
align-content	控制多行项目在交叉轴（垂直方向）上的对齐方式

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

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

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

align-content 属性可选值：

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

这里的示例代码就用一条来展示全部：

<head>
  <meta charset="UTF-8">
  <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>
  <!-- 
  ====== 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>

示例效果：

3.空间分配

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

我们通过三个实验来了解这个空间分配：

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

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

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

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

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

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

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

- 默认值：0（不放大）

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

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

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

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

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

- 设置为 0 表示禁止缩小

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

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

这三个实验的完整示例代码如下：

<!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: 0 0 120px 可以一次性设置三个属性

元素	flex-grow	flex-shrink	flex-basis	效果
Logo	0	0	120px	固定宽度，不变化
菜单	1	1	0	自动填充剩余空间
按钮	0	0.5	80px	固定宽度，允许轻微收缩

4.对齐方式

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

第4点和第1点是结合在一起的，就不过多赘述了。

今天的内容到这就结束了，我们下次见！

AtomGit开源社区

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

更多推荐

面向MIMO基带干扰消除的高灵活性异构多核体系结构设计开发【附程序】

为了支持非线性干扰消除中的排序操作，设计了一个专用的排序系统，包含4级流水线比较树，对16个输入值进行并行排序，延迟仅为3个时钟周期。编程模型方面，计算核采用类似软流水的方式，一个计算任务分解为多个阶段，每个阶段由一条微指令控制，一条微指令可以同时驱动多个运算单元。以8x8 MIMO的线性最小均方误差检测算法为例，C代码约500行，手工映射到该异构多核架构后，汇编代码为1800条，运行总时钟周期为

AtomGit开源社区

[智能体-118]：LangChain 核心组件、功能与 API 详解

功能：定期调用 LLM 把长对话压缩为摘要，大幅减少 Token 占用。适用：长时多轮对话、上下文窗口较小的模型。

AtomGit开源社区

【EI复现】基于主从博弈的新型城镇配电系统产消者竞价策略【IEEE33节点】(Matlab代码实现）

本文采用SFE模型对产消者竞价行为建模,确立了含多产消者的新型城镇配电系统日前现货市场交易机制,建立了含竞价博弈和优化调度的双层模型。上层模型追求产消者利润最大化,可确定多个产消者在配电网内的最优报价策略,下层模型考虑运行安全约束以及用户参与DR对系统进行最优经济调度﹐确定市场出清价格。最后﹐采用改进粒子群优化算法与(CPLEX求解器相结合的方法对该多主从博弈模型进行求解。