flex可以实现中间宽度固定，两边自适应的三列布局吗
<!DOCTYPE html>
<html>
<head>
<title>css3Grid</title>
<style type="text/css">
.one{
background-color: red;
}
.two{
background-color: yellow;
}
.three{
background-color: green;
}
.three-column{
width: 100%;
height: 500px;
display: box;
display: -webkit-box;
}
.two{
-webkit-box-flex:1;
}
.one, .three{
-webkit-box-flex:0 0 200px;
}
</style>
</head>
<body>
<div class="three-column">
<div class="one">
1
</div>
<div class="two">
2
</div>
<div class="three">
3
</div>
</div>
</body>
</html>上述代码本来想试试两边宽度固定，中间宽度自适应的，后来发现在实践过程中-webkit-box-flex:0 0 200px;并不起作用。
请问该怎么改才可以呢？
展开
收起
1
条回答
写回答
写回答
-
IT从业你的问题也写错了吧，是想实现中间自适应，两边固定的吧。
其实flex布局的话，自适应的不服加上flex属性，其他固定的部分直接加上宽度就可以了。.one { background-color: red; } .two { background-color: yellow; } .three { background-color: green; } .three-column { width: 100%; height: 500px; display: box; display: -webkit-box; display: flex; } .two { -webkit-box-flex: 1; flex: 1 } .one, .three { width: 200px; }如果是要实现中间固定，两边自适应，就把样式对调一下就好了。
flex兼容性比较差，记得要把该加的浏览器兼容方案都加上去。2019-07-17 19:33:50赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
