Flex布局实现圣杯布局，左右两列固定、中间列自适应的三列式布局

最新推荐文章于 2023-08-31 18:13:34 发布

原创最新推荐文章于 2023-08-31 18:13:34 发布 · 2.6w 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#flex #css

css 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了Flex布局的主要功能，并通过实例详细讲解如何利用Flex布局实现经典的圣杯布局，即页面中三列结构，两侧列固定宽度，中间列自适应宽度的布局方式。内容包括Flex布局的属性应用以及具体的CSS和HTML代码实现。

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

一、Flex主要解决两个问题：

1、元素位置：由6个容器属性和2个项目属性控制

6个容器属性

    flex-direction
    flex-wrap
    flex-flow
    justify-content
    align-items
    align-content

2个项目属性

    order
    align-self

2、元素尺寸或自适应能力：由4个项目属性控制

4个项目属性（也可以说是3个，因flex是flex-grow、flex-shrink、flex-basis的集合，后两个可选）

    flex-grow
    flex-shrink
    flex-basis
    flex

关于上述这些属性的介绍和使用，请查看前面的文章Flex布局教程：语法篇。

二、使用flex实现圣杯布局

圣杯布局格式要求：

页面从上到下为头部、中部、脚部；头部、脚部定高，不可伸缩；中部高度自适应。

中部三列式布局：左右两列定宽，不可伸缩；中间内容区自适应。

完整代码及代码分析如下：

CSS代码：

<style type="text/css">
    *{
        box-sizing:content-box;/* 伸缩项目自动box-sizing:border-box，所以需调整为content-box */
        margin:0;
        padding:0;
    }

    body{
        display:flex;
        flex-direction:column;/* 头、中部、脚纵向显示 */
    }

    header,footer{
        flex:0 0 50px;/* 头、脚尺寸固定，不放大、不缩小 */
        background:#3f3f3f;
    }

    .main{
        display:flex;

        /* 
        flex:1 == 1 1 auto：剩余空间放大比例(flex-grow)  空间不足缩小比例(flex-shrink)    分配多余空间之前项目占据的主轴空间(flex-basis)
        flex:1指的是：中部区域自由伸缩
        auto指的是项目本来大小，因未给main设置高度,main高度由子元素最高者决定，若子元素高度为0，则main高度为0
        块级元素未主动设置高度或未被子元素撑起高度，浏览器默认为块级元素分配高度为0。
        */
        flex:1;
    }

   .content{
        background:red;
        height:1000px;

        /* 
        横向中间内容区自适应，即使未指定宽度，但会分配宽度 
        块级元素未主动设置宽度或未被子元素撑起宽度，浏览器默认为块级元素分配宽度为可使用的全部宽度，比如全屏宽。
        */
        flex:1;
   }
   .left,.right{
        height:800px;
        background:blue;
        flex:0 0 100px;/* 左右两列固定宽 */
   }

   .left{
        order:-1;/* 让left居于左侧 */
   }

</style>

HTML代码：

<body>
    <header></header>
    <div class="main">
        <div class="content"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <footer></footer>
</body>