弹性盒实现圣杯布局

温柔晨光

于 2021-12-21 11:05:50 发布

阅读量264

点赞数

分类专栏： css3 文章标签： flexbox

本文链接：https://blog.youkuaiyun.com/moonla3/article/details/122057780

版权

本文详细介绍了如何利用弹性盒模型（Flexbox）来实现经典的圣杯布局，通过设置容器的display属性和子元素的flex属性，实现了内容区域居中，两侧侧边栏固定宽度且并排显示的效果。这种方法避免了传统的CSS Hack和负margin，使得布局更加简洁易维护。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0
        }

        .wrap {
            resize: both;
            overflow: hidden;
            width: 300px;
            height: 300px;
            border: 1px solid black;
            display: flex;
            flex-direction: column;
        }

        .header,
        .footer,
        .left,
        .right {
            flex: 0 0 20%;
            border: 1px solid green;
            box-sizing: border-box;
        }

        .contain {
            flex: 1 1 auto;
            display: flex;
        }

        .center {
            flex: 1 1 auto;