三列布局, 要求左右宽度固定, 中间自适应.
外层容器 display 设置为 flex, 默认是水平方向排列, 然后中间的元素设置 flex-grow 一个权重, 自然其会铺满剩余空间.
html 代码
- <div>#left</div>
- <div>#center</div>
- <div>#right</div>
- <style>
- div:nth-child(1),
- div:nth-child(3){
- background:gray;
- width:200px;
- }
- div:nth-child(2){
- background:silver;
- flex:1;
- }
- body{
- display:flex;
- }
- </style>
来源: http://www.qdfuns.com/article/17398/20a5362172397bb05b07858ef6ae2a9f.html