【CSS】Flex布局实例

最新推荐文章于 2023-05-22 18:25:58 发布

南栀~zmt

最新推荐文章于 2023-05-22 18:25:58 发布

阅读量748

点赞数

分类专栏： CSS 文章标签：前端 css3

本文链接：https://blog.csdn.net/qq_46658751/article/details/121360941

版权

CSS 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

Flex布局

网格布局
- 基本网格布局
- 百分比布局
圣杯布局

网格布局

基本网格布局

最简单的网格布局，就是平均分布，在容器里面平均分配空间。
在这里插入图片描述

<style type="text/css">
    .Grid {
        display: flex;
        margin-bottom: 5px;
    }

    .crid-cell,.crid-cell2 {
        flex: 1;
        background-color: yellow;
        margin-left: 5px;
    }

    .crid-cell2 {
        height: 200px;
    }
</style>

<body>
    <div class='Grid' >
        <div class="crid-cell">1/2</div>
        <div class="crid-cell">1/2</div>
    </div>

    <div class="Grid">
        <div class="crid-cell">1/3</div>
        <div class="crid-cell">1/3</div>
        <div class="crid-cell">1/3</div>
    </div>

    <div class="Grid">
        <div class="crid-cell">1/4</div>
        <div class="crid-cell">1/4</div>
        <div class="crid-cell">1/4</div>
        <div class="crid-cell">1/4</div>
    </div>

    <div class='Grid' >
        <div class="crid-cell2">...</div>
        <div class="crid-cell2">...</div>
    </div>
</body>

百分比布局

HTML

<div class="Grid">
    <div class="Grid-cell cell1">1/4</div>
    <div class="Grid-cell cell2" >auto</div>
    <div class="Grid-cell cell3">1/3</div>
</div>

在这里插入图片描述
CSS:

.Grid {
    display: flex;
}

.Grid-cell{
    background-color: yellow;
    flex: 1;
    margin-left: 5px;
}

.cell1 {
    flex: 0 0 25%;
}


.cell3 {
    flex: 0 0 33.3333%;
}

在这里插入图片描述

.Grid {
    display: flex;
}

.Grid-cell{
    background-color: yellow;
    flex: 1;
    margin-left: 5px;
}

.cell1 {
    flex: 0 0 50%;
}

圣杯布局

指的是一种最常见的网站布局。
页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。
其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏

在这里插入图片描述

<style>
    .demo {
        display: flex;
        flex-direction: column;
        min-height: 40vh;
    }

    .body {
        flex: 4;
        display: flex;  
        text-align: center;     
    }


    header,footer {
        background-color: gray;
        text-align: center;
        flex: 1;
    }

    .left,.right {
        background-color: pink;
        /* 两个边框的宽度各占总宽度的20% */
        flex: 0 0 20%;
    }
    
    .left {
        /* 导航放在最左边 */
        order: -1;
    }

    .center{
        flex: 1;
    }

</style>

<body>
    <div class="demo">

        <header>头部</header>

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

        <footer>底部</footer>

    </div>
</body>

南栀~zmt

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS】Flex布局实例

Flex布局网格布局基本网格布局百分比布局圣杯布局网格布局基本网格布局最简单的网格布局，就是平均分布，在容器里面平均分配空间。<style type="text/css"> .Grid { display: flex; margin-bottom: 5px; } .crid-cell,.crid-cell2 { flex: 1; background-color: yellow;
复制链接

扫一扫