CSS实现两边宽度固定，中间居中的布局

面试中经常会遇到如题这样的面试题。其意图是通过CSS实现一个这样的布局

1.png
本题期望的最佳答案其实是flex布局。当然了，解决方法多多益善，本文将提供常用几种

flex布局

<div class="box">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

.box {
    width: 100%;
    height: 200px;
    display: flex;
}
.left, .right {
    width: 20px;
    background:  #090;
}
.middle {
    flex: 1;
    background: #f00;
}

注意使用该方法实现时，middle只能位于三个div中间

浮动法

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
</div>

.box {
    width: 100%;
    height: 200px;
}
.left, .right {
    width: 20px;
    height: 200px;
    background:  #090;
}
.left {
    float: left;
}
.right {
    float: right;
}
.middle {
    background: #f00;
    height: 200px;
    margin: 0 20px;
}

该方法注意在使用时，middle只能位于三个div最后

定位法

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
</div>

.box {
    width: 100%;
    height: 200px;
}
.left, .right {
    width: 20px;
    height: 200px;
    background:  #090;
    position: absolute;
}
.left {
    left: 0;
}
.right {
    right: 0;
}
.middle {
    background: #f00;
    height: 200px;
    margin: 0 20px;
}

总结以上三种方式，但后两种在小分辨率下会错乱，推荐第一种方式，现在去动手试试，并记住第一种方式吧！