昨天早上看着阿里巴巴上市以来的喜讯时脑子一热，就翻起了阿里巴巴2014年Web前端的笔试题，其中一道题提起了我的兴趣：

下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。请使用CSS3中的功能实现它们的布局。

已知Html的结构是： <div class="box"> <div class="item">column 1</div> <div class="item">column 2</div> <div class="item">column 3</div> </div>

在网上看到过这样一个例子，很有趣，在这里转述给大家：马林大叔省吃俭用一辈子，终于在上海郊外买了间400平米的商品房。后来，马林大叔想回老家养老，决定把房子分配给他的三个儿子。ok，先暂停下，这里提到的“房子”就是”box-flex”中的”box”，“分配”就是”box-flex”中的”flex”，于是，这个“分配房子”的举动就称为”box-flex”，而box-flex属性的值就是说的如何分配，分配比例是什么。oK，继续我们的例子，马林大叔的三个儿子分别叫做大马，中马和小马，其中大马已经结婚多年，有一堆双胞胎女儿，拖家带口的人多；而中马和小马是优秀的光棍人士。所以，大马要求分配200平米的房子，剩下的两个兄弟平分。最终，家人一番协商有了下面的分配结果，就是： #大马{width:200px} #中马{box-flex:1;} #小马{box-flex:1;} 转换为CSS代码为： .item{ -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; } .item:fitst{ -moz-box-flex: 0; -webkit-box-flex: 0; box-flex: 0; width:200px; }

box-flex的含义与作用理解瞬间柳暗花明：用来按比例分配父标签的宽度(或高度)空间。box-flex的值为至少为1的整数时起作用。但是，仅仅一个box-flex属性是不足以实现子元素间的空间分配，因为还要看其老爸的意思。所谓，我爸是李刚，撞人很嚣张；恨爸不是刚，撞人心慌慌。只有老爸开口说：“这个房子现在你们随意分配。”其子女才能分配。所以，父元素也是需要添加必要的声明的。此声明就是： .box{ display: -moz-box; display: -webkit-box; display: box; }

为了让大家更加清楚的认识，这里还有一个“续集”分享给大家：

原本兄弟三人和和睦睦是一点问题都没有的，房子怎么分也基本都定下来了。然而，突然，事情起了波澜。马林大叔忽然决定先暂时住在大马家里，这样可以陪陪孙女解解闷，但房子还是要分的，最终，家人一番协商有了下面的分配结果：房子均分四份，大马占两份，中马小马各占一份,即： #马林{display:box;} #大马{box-flex:2;} #中马{box-flex:1;} #小马{box-flex:1;} 结果如下图所示：

• « Previous
• Archive
• Next »