web基础学习（十三）CSS3弹性盒模型布局

最新推荐文章于 2025-06-05 00:01:36 发布

原创最新推荐文章于 2025-06-05 00:01:36 发布 · 467 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#弹性盒模型

web前端同时被 2 个专栏收录

17 篇文章

订阅专栏

web基础

15 篇文章

订阅专栏

本文详细介绍CSS3弹性盒（Flexbox）布局的基本概念及应用。包括弹性容器的6个属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content；以及弹性子元素的6个属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self。通过实例演示了如何使用这些属性实现灵活的响应式布局。

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

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

一、弹性容器(flex container也就是父级元素)

在这里插入图片描述

父级元素共有6个属性下面详细对这几个属性分析布局讲解

flex-direction

设置主轴方向，确定弹性子元素排列方式
flex-direction：row | row-reverse | column | column-reverse
flex-wrap

设置弹性子元素超出弹性容器范围时是否换行
flex-wrap：nowrap | wrap | wrap-reverse
flex-flow

复合属性(flex-direction和flex-wrap)，设置弹性子元素排列方式
flex-flow：[ flex-direction ] || [ flex-wrap ]
justify-content

设置弹性子元素主轴上的对齐方式
justify-content：flex-start | flex-end | center | space-between | space-around
align-items

设置弹性子元素侧轴上的对齐方式
align-items：flex-start | flex-end | center | baseline | stretch
align-content

侧轴有空白且有多行时，设置弹性子元素侧轴上的对齐方式
align-content：flex-start | flex-end | center | space-between | space-around | stretch

二、弹性子元素(flex item)

在这里插入图片描述

子元素也有6个属性下面是布局详解

order

设置弹性子元素的顺序，数值小的排在前面，可以为负值默认值为0。
order：<integer>
flex-grow

设置弹性子元素的扩展比率，不允许为负值，默认值为0,根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间
flex-grow：<number>
flex-shrink
>设置弹性子元素的收缩比率，不允许为负值，默认值为1,根据弹性盒子元素所设置的扩展因子作为比率来收缩空间
>flex-shrink：<number>
flex-basis

设置弹性子元素的伸缩基准值(参照值)，不允许为负值。 默认值为auto，无特定宽度(高度)
flex-basis：<length> | <percentage> | auto
flex

复合属性，设置弹性子元素的空间如何分配
flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
align-self

设置弹性子元素的在侧轴上的对齐方式，与align-item的相同。设置某个弹性子元素的独立对齐方式。
align-self：auto | flex-start | flex-end | center | baseline | stretch

弹性盒模型重在理解,自己练习后很容易理解里面的含义。
拷贝demo测试练习吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FLEX</title>
    <style>
        .flex-container {
            /*开启弹性盒子*/
            display: flex;
            /*设置主轴水平方向*/
            flex-direction: row;
            /*设置超出范围允许换行*/
            flex-wrap: wrap;
            /*复合方式写主轴水平方向和换行*/
            flex-flow: row wrap;
            /*设置主轴居中对齐*/
            justify-content: center;
            /*设置子元素侧轴居中对齐*/
            align-items: center;
            width: 1200px;
            height: 640px;
            background-color: lightsteelblue;
        }

        .flex-container .flex-item {
            width: 320px;
            height: 240px;
            margin: 10px;
            font-size: 50px;
            font-weight: bolder;
            line-height: 240px;
            color: red;
            text-align: center;
            background-color: lightsalmon;
        }
        /*使用order设置每个子元素的顺序*/
        .flex-container .one{
            order: 1;
            /*设置扩展比率2 */
            flex-grow:2;
        }
        .flex-container .two{
            order: 3;
            /*设置扩展比率1 */
            flex-grow:1;
        }
        .flex-container .three{
            order: 4;
            /*设置扩展比率3 */
            flex-grow:3;
        }
        .flex-container .four{
            order: 2;
            
        }
        .flex-container .five{
            order: 5;
        }
        .flex-container .six{
            order: 0;
        }
    </style>
</head>
<body>
<div class="flex-container">
    <div class="flex-item one">1</div>
    <div class="flex-item two">2</div>
    <div class="flex-item three">3</div>
    <div class="flex-item four">4</div>
    <div class="flex-item five">5</div>
    <div class="flex-item six">6</div>
</div>
</body>
</html>