本文链接：https://blog.csdn.net/wybxzht/article/details/108011256

本文通过实例展示了如何使用flexbox创建网格布局和实现圣杯布局。介绍了使用`flex: 1`使元素自适应，以及`flex: 0 0 25%`设置固定尺寸的方法。内容包括对应的HTML结构和CSS样式代码，同时提供了正常屏幕和小屏显示的效果展示。

摘要由CSDN通过智能技术生成

网格布局：

flex：1；将项目设为auto。
flex：0 0 25%；将项目设为固定的大小容器的1/4；

实现效果：

在这里插入图片描述

html：

    <div class="box">
        <div class="item">
            <div></div>
            <div></div>
            <div></div>

        </div>
        <div class="item">
            <div></div>
            <div></div>
        </div>
        <div class="item">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

css：


<style>
    .box{
        width: 50%;
        height: 900px;
        margin: 0 auto;
        background: silver;
    }
    .item{
        width: 300px;
        height: 300px;
        font-size: 50px;
        font-weight: bold;
        line-height: 300px;
        text-align: center;
        color: white;
        border: solid 2px orange;
        box-sizing: border-box;
    }
    .box{
        display: flex;
        flex-wrap: wrap;
    }
    .box>.item{
        flex-basis: 100%;
        display: flex;
    }
    /*flex: 1当width没有填满容器时，auto扩充 */
    .box>.item>div{
        flex: 1;
    }
    .box>.item:nth-child(1)>div{
        border: 1px solid purple;
    }
    /*flex: 0 0 50%;不扩充，width恒为容器的50% */

    /* 1/2 */
    .box>.item:nth-child(1)>div:nth-child(1){
        flex: 0 0 50%;
    }
    /* auto */
    .box>.item:nth-child(2)>div{
        border: 1px solid purple;
    }
    /* 1/3 */
    .box>.item:nth-child(2)>div:nth-child(1){
        flex: 0 0 33.333333%;
    }
    /* 其余auto */
    .box>.item:nth-child(3)>div{
        border: 1px solid purple;
    }
    /* 1/4 */
    .box>.item:nth-child(3)>div:nth-child(1){
        flex: 0 0 25%;
    }
</style>

圣杯布局，flex实现： 运用了网格布局的思路。

实现效果：

正常屏幕：

在这里插入图片描述
小屏显示：

在这里插入图片描述

html：

<div class="box">
        <div class="header">header</div>
        <div class="main">
            <div class="cen">
                center
            </div>
            <div class="lf">
                left
            </div>
            <div class="rf">
                right
            </div>
        </div>
        <div class="footer">footer</div>
    </div>

css：

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            display: flex;
            flex-direction: column;
            background: red;
            align-items: center;
        }
        .box>div{
            width: 80%;
            height: 100px;
            background: #000;
            color: white;
            font-weight: bold;
            font-size: 40px;
            text-align: center;
            line-height: 100px;
        }
        .box>.main{
            height: 500px;
            background: gold;
            line-height: 100px;
            display: flex;
        }
        .box>.main>div{
            flex: 1;
        }
        .box>.main .lf{
            order: -1;
            background: yellowgreen;
            flex: 0 0 20%;
        }
        .box>.main .rf{
            background: skyblue;
            flex: 0 0 30%;
        }
/* 屏幕宽度小于768px,主轴方向改变,垂直排列 */
        @media (max-width:768px){
        .box>.main{
            flex-direction: column;
            flex: 1;
        }
        .box>.main .cen{
            flex: auto;
        }
        .box>.main .lf{
            flex: auto;
        }
        .box>.main .rf{
            flex: auto;
        }
        }
    </style>