如何实现两列固定一列自适应

最新推荐文章于 2023-11-22 12:38:35 发布

toocool404

最新推荐文章于 2023-11-22 12:38:35 发布

阅读量248

点赞数 1

CC 4.0 BY-SA版权

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/weixin_45941959/article/details/104580905

笔记专栏收录该内容

2 篇文章

订阅专栏

本文深入讲解了CSS中Flex布局的flex-grow属性，解释了如何通过该属性调整子元素在容器中的扩展行为，以及如何根据比例值分配空白区域，实现灵活的响应式布局。

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

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:green;}
    .nav{ width:100px;  height:400px;  background:blue;}
    </style>
</head>
<body>
   

    <div class="main">
        <div class="ascide"></div>
        <div class="detail"></div>
        <div class="nav"></div>
    </div>
</body>
</html>