与时俱进，三栏弹性布局的5种方法（绝对定位、圣杯、双飞翼、flex、grid）

与时俱进，三栏弹性布局的5种方法（绝对定位、圣杯、双飞翼、flex、grid）

一、前言

本文以实用角度出发，直接列出三栏弹性布局的5种方法：绝对定位、圣杯、双飞翼、flex、grid 的具体代码，并简要分析其原理和优缺点。

二、需求

需求：用css实现三栏布局，html结构代码如下，顺序不能变（main优先渲染），可以适当加元素，同时要求left宽度200px，right宽度300px，main宽度自适应。

    <div class="container">
        <div class="main">main 宽度自适应</div>
        <div class="left">left 宽200px</div>
        <div class="right">right 宽300px</div>
    </div>

效果：
在这里插入图片描述

三、具体代码

3.1 绝对定位布局

原始的布局方法

  • 原理：container为相对定位并设置左右padding为left和right的宽度，left\right绝对定位在左右两侧，main不用设置。
  • 优点：兼容好、原理简单
  • 缺点：left和right都为绝对定位，高度不能撑开container
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>绝对定位布局</title>
</head>
<style>
    .container{
        color:#fff;
        position: relative;
        padding:0 300px 0 200px;
    }
    .left,.main,.right{
        top:0;
        min-height:100px;
    }
    .left{
        position:absolute;
        width: 200px;
        background: blue;
        left:0;
    }
    .right{
        position:absolute;
        width:300px;
        background: red;
        right:0;
    }
    .main{
        background: green;
    }
</style>
<body>
    <div class="container">
        <div class="main">main 宽度自适应</div>
        <div class="left">left 宽200px</div>
        <div class="right">right 宽300px</div>
    </div>
</body>
</html>

3.2 圣杯布局

经典布局方法

  • 原理：container设置左右padding为left和right的宽度，left\right\main 浮动，left\right相对定位并设置left、right、margin-left来偏移位置，main宽100%。
  • 优点：兼容好
  • 缺点：原理复制，left/right/main高度自适应情况下3者不能高度一致。
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
</head>
<style>
    .container{
        color:#fff;
        overflow: hidden;
        padding:0 300px 0 200px;
    }
    .left,.main,.right{
        float:left;
        position: relative;
        min-height:100px;
    }
    .left{
        width: 200px;
        background: blue;
        margin-left:-100%;
        left:-200px;
    }
    .right{
        width:300px;
        background: red;
        margin-left:-300px;
        right:-300px;
    }
    .main{
        width:100%;
        background: green;
    }
</style>
<body>
    <div class="container">
        <div class="main">main 宽度自适应</div>
        <div class="left">left 宽200px</div>
        <div class="right">right 宽300px</div>
    </div>
</body>
</html>

3.3 双飞翼布局

圣杯布局改进方法

  • 原理：left\right\main 浮动，left\right设置margin-left来偏移位置，main宽100%，main出入content，并设置content的左右边距为left\right宽度
  • 优点：兼容好，原理简单
  • 缺点：left/right/main高度自适应情况下3者不能高度一致。
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
</head>
<style>
    .container{
        color:#fff;
        overflow: hidden;
    }
    .left,.main,.right{
        float:left;
        min-height:100px;
    }
    .left{
        width: 200px;
        background: blue;
        margin-left:-100%;
    }
    .right{
        width:300px;
        background: red;
        margin-left:-300px;
    }
    .main{
        width:100%;
        background: green;
    }
    .content{
        margin:0 300px 0 200px;
    }
</style>
<body>
    <div class="container">
        <div class="main">
            <div class="content">
                main 宽度自适应
            </div>
        </div>
        <div class="left">left 宽200px</div>
        <div class="right">right 宽300px</div>
    </div>
</body>
</html>

3.4 flex布局

css3新布局方式

  • 原理：container设置display:flex ，left设置order:-1排在最前面，main设置flex-grow:1 自适应宽度
  • 优点：原理简单，代码简洁，left/right/main高度自适应情况下3者能高度一致
  • 缺点：兼容性不够好，ie10+，chrome20+，正式使用要加各种前缀（-webkit--ms-）
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
</head>
<style>
    .container{
        color:#fff;
        display: flex;
    }
    .left,.main,.right{
        min-height:100px;
    }
    .left{
        order:-1;
        width: 200px;
        background: blue;
    }
    .right{
        width:300px;
        background: red;
    }
    .main{
        flex-grow:1;
        background: green;
    }
</style>
<body>
    <div class="container">
        <div class="main">main 宽度自适应</div>
        <div class="left">left 宽200px</div>
        <div class="right">right 宽300px</div>
    </div>
</body>
</html>

3.5 grid布局

css3新布局方式

  • 原理：container设置display:grid 和 grid-template-columns:200px auto 300px，left设置order:-1排在最前面
  • 优点：原理简单，代码简洁，left/right/main高度自适应情况下3者能高度一致
  • 缺点：兼容性较差，ie10+，Chrome57+，正式使用要加各种前缀（-webkit--ms-）
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>grid布局</title>
</head>
<style>
    .container{
        color:#fff;
        display: grid;
        grid-template-columns: 200px auto 300px;
    }
    .left,.main,.right{
        min-height:100px;
    }
    .left{
        order:-1;
        background: blue;
    }
    .right{
        background: red;
    }
    .main{
        background: green;
    }
</style>
<body>
    <div class="container">
        <div class="main">main 宽度自适应</div>
        <div class="left">left 宽200px</div>
        <div class="right">right 宽300px</div>
    </div>
</body>
</html>

四、总结

发现一个特点，order属性可以用在flex和grid上。
总的来说flex和grid布局原理更简单，功能也更多，是未来趋势，目前可以考虑用在移动端。

参考：https://blog.csdn.net/wangchengiii/article/details/77926868

posted @ 2019-10-14 22:26  smartwange  阅读(134)  评论(0)    收藏  举报