理解前端弹性盒子模型（Flexbox）-CSDN博客

本文链接：https://blog.csdn.net/fakerking/article/details/126377075

本文详细介绍了前端的弹性盒子模型，包括布局模式、基本概念、容器属性和项目属性。通过示例展示了如何使用`display: flex`进行灵活的页面布局，如调整元素的排列方向、对齐方式和换行方式，以及控制项目的顺序和尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.弹性盒子模型（display：flex）

1.布局模式：

（1）tabel布局：表格来进行页面布局，适合内容格式比较单一，整齐的布局。
   （2）div+css：盒子模型，使用灵活，但是比较难以控制。
   （3）弹性盒子模型（display：flex，也是使用div，让div的display属性变为flex）
       特点：
           在不同方向排列元素
           重新排列元素的显示1顺序
           更改元素的对齐方式
           动态地将元素装入容器

2.基本概念

   （1）容器（flex container）：是一个块级标签（特征：可以包含其他的页面元素）
   （2）项目：也成为子项（包含在容器的元素）
   （3）排列方向（direction）：元素的布局方向

3.容器属性

（1）flex-direction：定义容器中元素的布局方式（排列方式），取值如下：
       a.row：默认值，排列的主轴方向为水平方向，从最左端开始
       b.row-reverse：排列的主轴方向为水平方向，从最右端开始
       c.column：主轴方向为垂直方向，并且起点是上沿
       d.column-reverse:主轴方向为垂直方向，并且起点是下沿
   （2）flex-wrap：决定容器里的元素是否换行
       a.nowrap:默认，不换行
       b.wrap：换行，第一行在上方
       c.wrap-reverse：换行，第一行在下方
   （3）flex-flow：是flex-direction和flex-wrap的简写，默认值是row nowrap
   （4）justify-content:子项的对齐方式
       a.flex-start：左对齐（默认）。注意：表示容器的开始
       b.flex-end:右对齐（表示容器的结尾）
       c.space-between：两端对齐，子项之间的宽度是相等的
       d.center：居中
       e.flex-around：每个项目（子项）两侧的间距相等
   （5）align-items：单根轴线的对齐方式
   （6）align-content：多根轴线的对齐方式

4.项目的属性

   （1）order：项目（子项）的排序顺序，数字越小排列越靠前
   （2）flex-grow：项目的放大比列
   （3）flex-shrink：设置项目是否会缩小
   （4）align-self：运行单个项目与其他项目有不一样的对齐方式。默认值为auto，继承了容器的align-items属性的值
   （5）flex-basis：项目的初始宽度
   （6）flex：flex-grow flex-shrink flex-basis 三个属性的缩写
       例如：flex：1;等价于 flex-grow：1；flex-shrink：1；flex-basis：0；
注意：弹性布局默认不改变项目的宽度，但是它默认改变项目的高度。如果项目没有显示指定高度，就会占据容器的所有高度。

示例1：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子</title>
</head>
<style>
    .one,.two,.three{
        width: 100px;
        height: 100px;
        background-color: coral;
        margin: 20px;
        color: white;
        line-height: 100px;
        text-align: center;
    }
    .container{
        width: 300px;
        display: flex;/*容器采用弹性盒子*/
        /* flex-direction: row; 表示容器内容的排列方向为水平方向：从左往右 */
        /* flex-wrap: wrap-reverse; */
        /* justify-content: space-around; */
        align-items: baseline;
    }
</style>
<body>
    <div class="container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
</body>
</html>

示例二：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container{
        display: flex;
        /* align-items: stretch; */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 550px;
        height: 600px ;
        background-color: #ccc;
    }
    .one{
        width: 80px;
        height: 120px;
        background-color: green;
        color: white;
        text-align: center;
        line-height: 120px;
    }
    .two{
        width: 80px;
        height: 80px;
        background-color: #98981d;
        color: white;
        text-align: center;
        line-height: 80px;
        margin: 20px;
    }
    .three{
        width: 100px;
        height: 100px;
        background-color: red;
        color: white;
        text-align: center;
        line-height: 100px;
        margin: 20px;
    }
    .four{
        width: 200px;
        height: 100px;
        background-color: blue;
        color: white;
        text-align: center;
        line-height: 100px;
        margin: 20px;
    }
</style>
<body>
    <div class="container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
    </div>
</body>
</html>

示例三：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container{
        display: flex;
        width: 900px;
        height: 300px;
        background-color: blueviolet;
        align-items: flex-start;
    }
    .one,.two,.three,.four,.five{
        background-color: chocolate;
        height: 50px;
        color: white;
        margin: 20px;
        text-align: center;
        line-height: 50px;
    }
    .one{
        width: 100px;
        order: 1;
        /* flex-grow: 1; */
    }
    .two{
        width: 120px;
    }
    .three{
        width: 100px;
        align-self: flex-end;
    }
    .four{
        width: 80px;
    }
    .five{
        width: 150px;
        /* flex-shrink: 0; */
    }
</style>
<body>
    <div class="container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
    </div>
</body>
</html>