Flex弹性盒子

YOUAKE

270人浏览 · 2026-05-27 00:50:59

YOUAKE · 2026-05-27 00:50:59 发布

一.Flex弹性盒子的定义

flex弹性盒子（Flexible Box Layout，简称Flexbox）是一种CSS布局模型，旨在提供更高效、灵活的容器内项目排列方式。它通过调整容器内项目的宽度、高度和顺序来适应不同屏幕尺寸和设备。

二.Flex弹性盒子的核心概念及主要属性

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

2）主要属性：

容器属性（作用于父元素）

display: 定义容器为弹性布局，取值为 flex 或 inline-flex。
flex-direction: 设置主轴方向，可选 row（默认）、row-reverse、column、column-reverse。
flex-wrap: 控制项目是否换行，可选 nowrap（默认）、wrap、wrap-reverse。
justify-content: 主轴对齐方式，如 flex-start、center、space-between、space-around。
align-items: 交叉轴对齐方式，如 stretch（默认）、flex-start、center、baseline。
align-content: 多行项目的交叉轴对齐，需配合 flex-wrap: wrap 使用。

项目属性（作用于子元素）

order: 定义项目排列顺序，数值越小越靠前（默认值为0）。
flex-grow: 分配剩余空间的比例，默认值为0（不扩展）。
flex-shrink: 定义项目收缩比例，默认值为1（允许收缩）。
flex-basis: 项目在主轴上的初始大小，如 auto、100px。
flex: 简写属性，格式为 flex-grow flex-shrink flex-basis（默认 0 1 auto）。
align-self: 覆盖容器的 align-items 设置，允许单个项目自定义对齐方式。

三.Flex容器属性的各种对齐方式

1）display: flex 与 inline-flex 的区别

display: flex 将元素作为块级弹性容器渲染，占据整行宽度。
display: inline-flex 将元素作为行内弹性容器渲染，宽度由内容决定，与其他行内元素共享同一行。

2）flex-direction 控制主轴方向

。row为默认值，主轴方向为从左到右，使项目从左到右水平排列为一排

3）flex-wrap 处理项目换行

。nowrap：为默认值，所有的项目单行排列

。wrap：项目会按照需求自动进行换行，使项目从上到下排列。

4）justify-content: flex-start

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

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

5）align-items: stretch

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

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

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

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;

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

<head>

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

            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>

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Flex布局示例6 - 多行项目在容器交叉轴方向的对齐方式（含换行控制）</title>
  <style>
    /* 
    ====== 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   → 换行，但反向显示（第一行在底部）
    
    */
    
    /* 定义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>
 
  
  <h1>多行项目在容器交叉轴方向上的对齐方式</h1>
换行（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>


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

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

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


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