CSS基础-flex布局

最新推荐文章于 2025-04-10 23:09:07 发布

fsj2009yx

最新推荐文章于 2025-04-10 23:09:07 发布

阅读量664

点赞数 5

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/2301_79601341/article/details/143516646

版权

flex布局

弹性布局

Flex布局也称弹性布局，提供强大的空间分布和对齐能力

Flex模型不会产生浮动盒子中的脱标现象，布局更加简单灵活

flex组成

给父元素设置display:flex，子元素可以自动挤压和拉伸

flex模型组成部分：

弹性容器
弹性盒子
主轴：默认水平方向
交叉轴：默认垂直方向

<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <style>
        .box {
            height: 400px;
            background-color: #f00;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .box div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</body>

上面的代码通过flex模型实现了div盒子在父级元素内**水平垂直居中均匀排列，简单高效

弹性盒子：

在弹性容器中，弹性盒子指子级元素的盒子大小可以自动挤压和拉伸，且弹性盒子默认沿着主轴方向排列：

父级元素内所有子元素的总宽度如果超过了父级大小，使用flex布局会自动调整子级元素盒子大小，如下：

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
    </div>
    <style>
        .box {
            width: 800px;
            height: 400px;
            background-color: #f00;
            display: flex;
        }

        .box div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</body>

请添加图片描述

子级元素的width明显超过父级元素所给区域，使用flex布局自动对子级元素实现挤压

如果子级div没有设置height，使用flex布局会自动拉伸子级元素使其填充父级盒子，如：

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
    </div>
    <style>
        .box {
            width: 800px;
            height: 400px;
            background-color: #f00;
            display: flex;
        }

        .box div {
            width: 200px;
            background-color: pink;
        }
    </style>
</body>

请添加图片描述

flex布局

描述	属性
创建flex容器	`display:flex`
主轴对齐方式	`justify-content`
侧轴对齐方式	`align-items`
某个弹性盒子侧轴对齐方式	`align-self`
修改主轴对齐方式	`flex-direction`
弹性伸缩比	`flex`
弹性盒子换行	`flex-wrap`
行对齐方式	`align-content`

主轴对齐方式（justify-content）

常用的四个属性如下：
请添加图片描述
space-between、space-around和space-evenly的区别：

space-between排列会在弹性盒子间留间距，而最外侧不留
space-around排列会将空白间距分布在每个盒子两侧，在视图上盒子间的间距是最外层的两倍
space-evenly排列最外侧和弹性盒子间都有间距，且间距都相同

以下是视图对比：

space-between

请添加图片描述

space-around

请添加图片描述

space-evenly

侧轴对齐方式

align-items:当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）

align-self:单独设置某个弹性盒子的侧轴对齐方式（给某个特定的弹性盒子设置）

属性值	效果
`stretch`	弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子未设置侧轴方向尺寸则默认拉伸）
`center`	弹性盒子沿侧轴居中排列（垂直居中）
`flex-start`	弹性盒子从起点开始排列
`flex-end`	弹性盒子从终点开始排列

修改主轴方向

主轴默认水平方向，侧轴默认垂直方向

使用flex-direction:column修改主轴方向为垂直方向，从上到下

修改主轴方向可以在垂直方向上也使用flex模型调整布局，更加方便

弹性伸缩比

flex属性用于控制弹性盒子在主轴方向上的尺寸

默认情况下，flex值为1，也就是占用弹性容器剩余位置的1份

使用flex修改弹性伸缩比的示例：

<body>
    <div class="box">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
    <style>
        .box {
            width: 800px;
            height: 400px;
            background-color: #f00;
            display: flex;
        }

        .item {
            height: 200px;
        }

        .item1 {
            flex: 1;
            background-color: pink;
            /* 弹性伸缩比为1 */
        }

        .item2 {
            flex: 2;
            background-color: #0f0;
            /* 弹性伸缩比为2 */
        }

        .item3 {
            flex: 3;
            background-color: #00f;
            /* 弹性伸缩比为3 */
        }
    </style>
</body>

请添加图片描述

如图所示，三个div盒子的宽度按照1：2：3的比例占用父级盒子的宽度，如果父级div的width变化，三个盒子的宽度比例保持为1：2：3不变

弹性换行和行对齐方式

弹性盒子默认在一行内排列，如果flex-wrap:nowrap（默认不换行）则会在一行内自动挤压或拉伸

使用flex-wrap:wrap可以实现弹性盒子的自动换行：

<body>
    <div class="box">
        <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 class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
    </div>
    <style>
        .box {
            width: 800px;
            height: 500px;
            background-color: #f00;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            /* 添加这一行 */
        }

        .item {
            width: 200px;
            height: 100px;
            background-color: pink;
            margin: 10px;
        }
    </style>
</body>

请添加图片描述