如何实现多列固定与自适应

最新推荐文章于 2022-01-13 22:34:13 发布

xxxx_1104

最新推荐文章于 2022-01-13 22:34:13 发布

阅读量158

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/xxxx_1104/article/details/104596687

版权

一般在后台界面经常会有多列固定与自适应的效果，那么这种效果是怎么实现的呢，主要是用到flex-grow这个属性
flex-grow : 扩展 ( 想看到扩展的效果，必须有空隙 )
0 : 默认值 , 不去扩展
1 : 去扩展 , 会把空白区域全部沾满
子元素会按照设置的比例值来分配空隙，如果比例值总和小于1，那么会有空隙，如果比例值总和大于等于1，那么就没有空隙。（逆战班）
这个属性是作用在子元素身上的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
   *{
       margin:0; 
       padding:0;
    }
    #main{ 
        display: flex;
    }
    #aside{ 
        width:200px; 
        height:400px; 
        background:red;
    }
    #detail{ 
        flex-grow: 1; 
        height:400px;  
        background:blue;
    }
    </style>
</head>
<body>
    <div id="main">
        <div id="aside"></div>
        <div id="detail"></div>
    </div>
</body>
</html>

xxxx_1104

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何实现多列固定与自适应

一般在后台界面经常会有多列固定与自适应的效果，那么这种效果是怎么实现的呢，主要是用到flex-grow这个属性flex-grow : 扩展 ( 想看到扩展的效果，必须有空隙 )0 : 默认值 , 不去扩展1 : 去扩展 , 会把空白区域全部沾满子元素会按照设置的比例值来分配空隙，如果比例值总和小于1，那么会有空隙，如果比例值总和大于等于1，那么就没有空隙。（逆战班）这个属性是作用在子元素...
复制链接

扫一扫