标签：
可伸缩框属性 box
自诩大白一只，昨天笔试了创宇的前端，天一直下着雨，赶到的时候，整个人都不好了，成都七月的天气哇......
废话不多说，大致说一下 这道题 ，考察的是CSS3.0中的 box-flex属性，自适应性，由于之前只是简单的看了CSS3.0 所以当时，还是用CSS2.0做的。。。。。。
回来之后 感觉应该和小伙伴们共勉一下，顺便补全下知识。
题目要求如下图所示：（ps：自己用附件中的picture画，勉强可以看吧 \(^o^)/~）
要求：实现下面的HTML与CSS 用FLexbox，不用考虑IE6的兼容性，right部分大小是自适应的，left：width=100px。题目大致的意思就是这些。
需要知道了解的知识：
目前没有浏览器支持 box-flex 属性。
Firefox 支持替代的 -moz-box-flex 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。
注意：可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。
功能实现:
HTML Code：
1 <html> 2 <body> 3 <div id="top"></div> 4 <div class="wrap"> 5 <div id="left"></div> 6 <div id="right"></div> 7 </div> 8 </body> 9 </html>
CSS Code:
1 <style> 2 * 3 { 4 margin: 0px; 5 padding:0px; 6 } 7 #top 8 { 9 width:700px; 10 height:100px; 11 background:yellow; 12 13 } 14 .wrap 15 { 16 width:700px; 17 height:200px; 18 display:box; 19 display:-moz-box; 20 display:-webkit-box; 21 } 22 23 #left 24 { 25 background:#ff0000; 26 width:100px; 27 } 28 #right 29 { 30 background:green; 31 -moz-box-flex:1; 32 -webkit-box-flex:1; 33 box-flex:1; 34 } 35 </style>
个人思想是：top可以不用box-flex属性，默认定位就可以，下面的两部分，嵌套到一个 wrap中，利用CSS3的 box-flex属性，对left 进行width固定值，right中比例随意写都可以，因为只有它自己，并且是可伸缩的元素，会将空余的空间占满，和上面的注意是一样的。
结果显示：
缩小浏览器后：
可以 看到left宽度一直保持不变，right自适应变化。
以上纯属自己菜鸟的心得体会，与大家共勉，喜欢前端的小伙伴们，可以加我建的一个web前端交流群，目前就我一个群主 /(ㄒoㄒ)/~~群号：437866392
如果有什么不对的地方，还望大家指教。
北京知道创宇 前端笔试(一) Flexible Box(可伸缩框属性)
标签：
原文地址：http://www.cnblogs.com/jsdabai/p/4647740.html
