CSS实现三列布局两边固定中间自适应

目录

一、使用flex布局实现

二、使用float浮动

三、使用绝对定位

---

一、使用flex布局实现

• 使用 flex-grow 属性可以控制项目在剩余空间中占据的比例，值越大，占据的空间越多。默认值为 0，表示不放大。
• 使用 flex-basis 属性可以设置项目在主轴上的初始大小，可以是一个固定的长度值，也可以是 auto（默认值，根据内容自适应大小）。

 

使用这两个属性来实现两侧宽度固定中间自适应，flex-grow会在剩余宽度变化时自动分配宽度

HTML:

SCSS:

.main {
    display: flex;
    width: 100%;
    height: 300px;
    .item {
        border: 1px solid #eee;
        background-color: aquamarine;
    }
    .left {
        flex-basis: 100px; //项目的初始值
    }
    .right {
        flex-basis: 100px; //项目的初始值
    }
    .center {
        flex-grow: 1; //可以设置任意非负数字（正小数、正整数、0），默认是0 当有剩余空间时会自动重新分配宽度
    }
}

二、使用float浮动

.main {
    display: flex;
    width: 100%;
    height: 300px;
    .item {
        border: 1px solid #eee;
        background-color: aquamarine;
    }
    .left {
        width: 100px;
        float: left;
    }
    .right {
        width: 100px;
        float: right;
    }
    .center {
        width: calc(100% - 100px - 100px);
    }
}

三、使用绝对定位

.main {
    display: flex;
    width: 100%;
    height: 300px;
    position: relative;
    .item {
        border: 1px solid #eee;
        background-color: aquamarine;
        position: absolute;
        height: 100%;
    }
    .left {
        width: 100px;
        left: 0;
    }
    .right {
        right: 0;
        width: 100px;
    }
    .center {
        left: 100px;
        right: 100px;
    }
}