flex可以实现中间宽度固定，两边自适应的三列布局吗 财富值33

2016-04-03 08:04发布

站内问答 / 其它
1034 1 0 
<!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条回答
yilia_you - 所有的人都会为爱的人难过，只有日光盛开在最明媚的角落。
2016-04-03 09:04 .采纳回答

你的问题也写错了吧，是想实现中间自适应，两边固定的吧。
其实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兼容性比较差，记得要把该加的浏览器兼容方案都加上去。

一周热门 更多>