css：左中右布局占满屏幕，左右两块固定宽度200px ，中间自适应，先加载中间块

真实lie

已于 2022-07-05 21:04:19 修改

阅读量1.8k

点赞数 2

分类专栏： css 文章标签： css

于 2022-04-09 21:43:24 首次发布

本文链接：https://blog.youkuaiyun.com/qq_52824207/article/details/124068657

版权

flex布局 flex-grow css选择器优先级中间块先加载自适应

关键词由优快云通过智能技术生成

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了使用CSS弹性布局（display: flex）实现左中右布局的方法，重点讲解了如何通过flex-grow属性让中间元素自适应剩余空间，并处理了CSS选择器优先级问题，确保中间块先于两侧加载。

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

分析：

1.中间自适应

弹性布局display:flex

flex-grow增长系数，左右默认为0，中间设置为1即可分配所有剩余空间（分配给左右固定宽度之后的空间）

2：先加载中间

css选择器优先级问题

（1）越精确优先级越高

id选择器>类选择器>元素选择器(伪类、伪元素等暂不讨论)

（2）css文件里越后面优先级越高（相同类型）

用于先加载中间块（单纯满足需求：先加载中间块，和自适应没有关系）

代码：

html

<!DOCTYPE html>
<html>
    <head>
        <title>左中右布局</title>
        <link rel="stylesheet" href="左中右布局.css"/>
    </head>
    <body>
        <div class="flex-container">
            <div class="container-left">
                左边宽度固定200px
            </div>
            <div class="container-center">
                中间自适应
            </div>
            <div class="container-right">
                右边宽度固定200px
            </div>
        </div>
    </body>
</html>

css

*{
    margin: 0;
    padding: 0;
}

.flex-container{
    width: 100%;
    height: 1000px;
    display: flex;
    text-align: center;
    line-height: 1000px;
}

.container-right{
    width: 200px;
    background-color: blue;
}

.container-left{
    width: 200px;
    background-color: red;
}

.container-center{
    flex-grow: 1;
    background-color: yellow;
}

实际效果图：