CSS3流式布局

最新推荐文章于 2025-04-07 10:02:51 发布

丶帆

最新推荐文章于 2025-04-07 10:02:51 发布

阅读量1.1k

点赞数

文章标签： css3 css html flex javascript

本文链接：https://blog.youkuaiyun.com/yf19990720/article/details/107698150

版权

本文探讨CSS3的流式布局，包括左侧固定、右侧自适应、右侧固定左侧自适应、圣杯布局和等分布局等经典案例。通过示例介绍了圣杯布局的实现方式，分析了源码并提供了相关样式设置。

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

CSS3流式布局

流式布局：经典的流式布局有以下几类

左侧固定,右侧自适应
右侧固定左侧自适应
两侧固定,中间自适应(圣杯布局)
等分布局

例如以下这个，网页放大缩小只改变了右边绿色部分。在这里插入图片描述

源码分析

直接设置一个div，里面放两个小div

<div class="all">
        <div class="left"></div>
        <div class="right"></div>
    </div>

设置div样式

	.all {
        display: flex;
        height: 800px;
        background-color: pink;
    }
    
    .left {
        width: 200px;
        height: 300px;
        background-color: red;
    }
    
    .right {
        flex: 1;flex-grow: 1;    flex-shrink: 1;    flex-basis: 0%;
        height: 500px;
        background-color: green;
    }

以上就是圣杯布局的基本样式了
最后合并代码

<!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>流式布局</title>
</head>
<style>
    .all {
        display: flex;
        height: 800px;
        background-color: pink;
    }
    
    .left {
        width: 200px;
        height: 300px;
        background-color: red;
    }
    
    .right {
        flex: 1;
        height: 500px;
        background-color: green;
    }
</style>

<body>
    <div class="all">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>