北京知道创宇前端笔试(一) Flexible Box(可伸缩框属性)

时间 2019-11-30

标签北京知道前端笔试 flexible box 可伸缩属性栏目快乐工作繁體版

原文原文链接

　　可伸缩框属性 boxhtml

　　自夸大白一只，昨天笔试了创宇的前端，天一直下着雨，赶到的时候，整我的都很差了，成都七月的天气哇......前端

　　废话很少说，大体说一下这道题，考察的是CSS3.0中的 box-flex属性，自适应性，因为以前只是简单的看了CSS3.0 因此当时，仍是用CSS2.0作的。。。。。。
web

回来以后感受应该和小伙伴们共勉一下，顺便补全下知识。浏览器

　　题目要求以下图所示：（ps：本身用附件中的picture画，勉强能够看吧 \(^o^)/~）ide

要求：实现下面的HTML与CSS 用FLexbox，不用考虑IE6的兼容性，right部分大小是自适应的，left：width=100px。题目大体的意思就是这些。flex

须要知道了解的知识：spa

CSS3 box-flex 属性浏览器支持

目前没有浏览器支持 box-flex 属性。3d

Firefox 支持替代的 -moz-box-flex 属性。code

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。htm

注意：可伸缩元素可以随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。

功能实现:

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>

View Code

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>

View Code

我的思想是：top能够不用box-flex属性，默认定位就能够，下面的两部分，嵌套到一个 wrap中，利用CSS3的 box-flex属性，对left 进行width固定值，right中比例随意写均可以，由于只有它本身，而且是可伸缩的元素，会将空余的空间占满，和上面的注意是同样的。

结果显示：

缩小浏览器后：

能够看到left宽度一直保持不变，right自适应变化。

　　以上纯属本身菜鸟的心得体会，与你们共勉，喜欢前端的小伙伴们，能够加我建的一个web前端交流群，目前就我一个群主 /(ㄒoㄒ)/~~群号：437866392

若是有什么不对的地方，还望你们指教。

北京知道创宇 前端笔试(一) Flexible Box(可伸缩框属性)

CSS3 box-flex 属性浏览器支持

北京知道创宇前端笔试(一) Flexible Box(可伸缩框属性)