flex之两列与三列布局

最新推荐文章于 2024-08-03 23:03:36 发布

会玩代码的猫

最新推荐文章于 2024-08-03 23:03:36 发布

阅读量1.2k

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_43465508/article/details/129843732

版权

两列：普通布局

.main{
            height: 100vh;
            background-color: skyblue;
        }
        .col1{
            width: 200px;
            height: 60%;
            float: left;
            background: rebeccapurple;
        }
        .col2{
            margin-left: 200px;
            height: 100%;
            background: red;
            overflow: hidden;
        }

三列，弹性布局

.main{
            height: 100vh;
            background-color: skyblue;
            display: flex;
        }
        .col1{
            width: 200px;
            background-color: red;
        }
        .col2{
            flex-grow: 1;
            background-color: green;
        }
        .col3{
            width: 100px;
            background-color: blue;
        }

<style>
        /* 两列 */
        /* .main{
            height: 100vh;
            background-color: skyblue;
        }
        .col1{
            width: 200px;
            height: 60%;
            float: left;
            background-color: red;
        }
        .col2{
            height: 100%;
            background-color: blue; */
            /* margin-left: 200px; */
            /* overflow: hidden;
        } */

        /* 弹性盒 */
        .main{
            height: 100vh;
            background-color: skyblue;
            display: flex;
        }

        .col1{
            width: 200px;
            background-color: red;
        }
        .col2{
            flex-grow: 1;
            background-color: green;
        }
        .col3{
            width: 100px;
            background-color: blue;
        }

    </style>
</head>
<body>
    <div class="main">
        <div class="col1"></div>
        <div class="col2"></div>
        <div class="col3"></div>
    </div>
</body>