html基础------三栏布局（左右宽度固定，中间宽度自适应）

三栏布局

方法一：弹性盒--flex

        .wrap{
            background-color: #ffc107;
            height: 240px;
            display: flex;
        }
        .wrap>div{
            height: 240px;
        }
        .left{
            width: 200px;
            flex-basis: 200px;
            background-color: #ff00e9;
        }
        .center{
            flex: 1;
            background-color: aquamarine;
            overflow: hidden;
        }
        .right{
            width: 200px;
            flex-basis: 200px;
            background-color: #4cae4c;
        }



    <div class="wrap">
        <div class="left"></div>
        <div class="center">
            <h3>三栏布局：方法1----弹性盒</h3>
            <span>
                父元素设置：display: flex; 
                <br>
                左右子元素：固定宽度
                <br>
                中间元素：flex: 1;
            </span>
            <h3>父元素设置高度，子元素可设置高度 或 继承父元素高度,或由内容撑开</h3>
            <h3>缩小至一定宽度,左右两侧元素宽度会变小</h3>
        </div>
        <div class="right"></div>
    </div>

简介：

父元素设置：display: flex 设置高度，或子元素单独设置高度，或由内容撑开
左右子元素：固定宽度；
中间元素设置：flex: 1

注意：缩小至一定宽度,左右两侧元素宽度会小于设定值

方法二：定位

        .wrap2{
            background-color: #ffff00;
            position: relative;
            height: 240px;
        }
        .wrap2>div{
            height: 240px;
            position: absolute;
        }
        .left2{
            width: 200px;
            left: 0;
            background-color: #ff00e9;
        }
        .center2{
            left: 200px;
            right: 200px;
            background-color: aquamarine;
            overflow: hidden;
        }
        .right2{
            width: 200px;
            right: 0;
            background-color: #4cae4c;
        }



<div class="wrap2">
        <div class="left2"></div>
        <div class="center2">
            <h3>三栏布局：方法2----定位</h3>
            <span>
                父元素设置：position: relative; 并设置高度
                <br>
                左右子元素：设置高度 + 固定宽度，position: absolute; 左侧元素left: 0;  右侧元素right: 0;
                <br>
                中间元素：设置高度  position: absolute;    left: 左元素宽度;    right: 右元素宽度;
            </span>
            <h3>父元素设置高度，子元素也要设置高度,如果不设置则由内容撑开</h3>
            <h3>缩小至一定宽度,中间元素宽度会先缩小至0</h3>
        </div>
        <div class="right2"></div>
    </div>

简介：

父元素设置：position: relative; 并设置高度
左右子元素：设置高度 + 固定宽度，position: absolute; 左侧元素left: 0; 右侧元素right: 0;
中间元素：设置高度 position: absolute; left: 左元素宽度; right: 右元素宽度;

注意：缩小至一定宽度时,中间元素宽度会先缩小至0

方法三：浮动

         .wrap3{
            height: 200px;
            overflow: hidden;
        }
        .wrap3>div{
            height: 200px;
        }
        .left3{
            float: left;
            width: 200px;
            background-color: #4cae4c;
        }
        .right3{
            float: right;
            width: 200px;
            background-color: #4cae4c;
        }
        .center3{
            margin: 0 200px;
            background-color: #ffc107;
        }



     <div class="wrap3">
        <div class="left3"></div>
        <div class="right3"></div>
        <div class="center3"></div>
    </div>

简介：

父元素设置：overflow: hidden; 并设置高度
左右子元素：设置高度 + 固定宽度，position: absolute; 左侧元素左浮动，右侧元素右浮动;
中间元素：设置margin撑开左右距离

注意：中间元素 布局时要放在左右元素的下边

如有更多、更好的方法，欢迎各位大佬补充修改，提出建议！