CSS伸缩布局

最新推荐文章于 2023-02-01 09:54:18 发布

VIP文章冯晓如

最新推荐文章于 2023-02-01 09:54:18 发布

阅读量1.5k

点赞数 3

分类专栏： Web前端文章标签：伸缩布局

本文链接：https://blog.csdn.net/honeygirl_/article/details/102903868

版权

CSS伸缩布局

CSS flex 是一种伸缩布局，之前块级元素布局在同一行，可以通过display或position或float来实现，而flex 为和模型布局提供了极大地灵活性，所谓弹性布局即可根据大小判定自动伸缩。

flex相关属性如下：
1、display：flex；在父盒子定义flex，子盒子才能使用flex属性
2、flex：none |flex-grow flex-shrink flex-basis 设置子盒子的缩放比例，可以一起指定也可以单独指定。（均不可为负数）
（1）none 相当于 flex： 0 0 auto；

（2）flex-grow 用来规定盒子的扩展比率。
代码如下：

　<!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>Document</title>
    <style>
        .fa {
            width: 800px;
            height: 400px;
            border: 2px solid red;
            display: flex;
            margin: 200px auto;
        }
        
        .son1 {
            background-color: aqua;
            width: 200px;
        }
        
        .son2 {
            background-color: green;
            flex-grow: 1;
            width: 50px;
        }
        
        .son3 {
            background-color: blue;
            flex-grow: 2;
            width: 30px;
        }
        
        .son4 {
            background-color: orange;
            flex-grow: 3;
            width: 80px;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="son1">1</div>
        <div class="son2">2</div>
        <div class="son3">3</div>
        <div class="son4">4</div>
    </div>
</body>

</html>

效果图如下：
在这里插入图片描述
（3）flex-shrink 规定盒子收缩率
代码如下：

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

最低0.47元/天解锁文章

冯晓如

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
CSS伸缩布局

CSS伸缩布局CSS flex 是一种伸缩布局，之前块级元素布局在同一行，可以通过display或position或float来实现，而flex 为和模型布局提供了极大地灵活性，所谓弹性布局即可根据大小判定自动伸缩。flex相关属性如下：1、display：flex；在父盒子定义flex，子盒子才能使用flex属性2、flex：none |flex-grow flex-shrink f...
复制链接

扫一扫