css 实现 两端固定宽度，中间元素自适应
css 实现 两端固定宽度，中间元素自适应
在这篇文章中，我们通过几种不同的方法实现该功能，效果图如下：
一、使用flex实现
"box_container">
"box_left">left
"box_center">center
"box_right">right
解析：
（1）父元素定义为display: flex, 弹性布局是2009年w3c提出的一种新的方案布局, 功能简便强大。如不熟悉，请前往学习
（2）flex = 1; flex是flex-grow, flex-shrink, flex-basis的缩写。flex=1, 等同于 flex-grow=1, flex-shrink=1, flex-basic=0%; 常用于以下情况：当元素的空间小于父节点空间，设置了flex:1的元素会得到剩余的宽度，因为flex-grow=1发挥了作用。
二、使用position和margin实现
.box_container {
width: 600px;
height: 80px;
background-color: yellow;
position: relative;
}
.box_left {
width: 150px;
height: 80px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
.box_center {
height: 80px;
background-color: blue;
margin: 0 200px 0 150px;
}
.box_right {
width: 200px;
height: 80px;
background-color: green;
position: absolute;
right: 0;
top: 0;
}
"box_container">
"box_left">left
"box_center">center
"box_right">right
解析：
（1）左右两端的position设置absolute时，脱离标准流的约束，标准流是向下添加元素的，脱离标准流就可以使目标元素位于同一行上。
（2）左端元素：left=0;top:0， 对齐父节点的左上角
（3）右端元素：right:0, top:0, 对齐父节点的右上角。
（4）中间元素需要减去左右元素占用的空间，故使用margin定义左右元素的宽度。 margin: 0 200px 0 150px;分别是上右下左的margin. 特别注意，如果不使用margin减去左右元素的空间，那么中间元素会占用整个父节点的空间。
（5）center元素可以定义在任意位置，不需要放在最后定义，使用比较灵活。
三、使用float和margin实现
.box_container {
width: 600px;
height: 80px;
background-color: yellow;
}
.box_left {
width: 150px;
height: 80px;
background-color: red;
float: left;
}
.box_center {
height: 80px;
background-color: blue;
margin: 0 200px 0 150px;
}
.box_right {
width: 200px;
height: 80px;
background-color: green;
float: right;
}
"box_container">
"box_left">left
"box_right">right
"box_center">center
解析：
（1）左右元素是浮云的，中间的元素必须添加在左右元素后面，否则将显示在下一行，这也是使用float的缺点所在。
（2）使用margin来减去左右元素的宽度，就可以确定中间节点的宽度。
四、float 双飞翼布局
双飞翼布局是很久以前淘宝提出一种三栏布局的优化方案，目的是为了中间元素优化显示，因为浏览器渲染引擎在构建和渲染结构树是异步的，故将中间节点优先定义。
这里参考大神的文章
.box_container {
width: 600px;
height: 80px;
background-color: yellow;
}
.box_left {
width: 150px;
height: 80px;
background-color: red;
float: left;
margin-left: -100%;
}
.box_center_wrap {
width: 100%;
height: 80px;
float: left;
}
.box_center_item {
height: 80px;
background-color: blue;
margin: 0 200px 0 150px;
}
.box_right {
width: 200px;
height: 80px;
background-color: green;
float: left;
margin-left: -200px;
}
"box_container">
"box_center_wrap">
"box_center_item">center
"box_left">left
"box_right">right
解析：
（1）优先定义中间元素，box_center_wrap占用整个父节点空间，box_center_item是定义的子节点的 margin。从结构树中看，渲染时优先渲染中间元素节点，在某种场合有重要的用途。
（2）左右节点都定义为float浮动布局，如果在不定义margin的情况下，这两个元素都会显示在新的一行中。
（3）margin为负数是很多场合都会使用，margin-left 为负数，div向左移动，向左位置不够则向上移动，改变行的位置。
（4） 左元素margin-left: -100%; 是指减去父节点的宽度，那么左元素直接定义到父节点的最左端。
（5）右元素margin-left: -200px; 是指减去自身的宽度，那么右元素定位是父节点的右端。
（6）优点：优先渲染中间节点，支持各种宽高变化，通用性强。缺点：结构层增加，增加树的计算量。