今天在群里和@6key同学还有@qbaty同学一起讨论了一下关于box-flex的宽度设置问题。
@6key同学提出的最原始的代码如下：
<!DOCTYPE html>
<html>
<head>
<title>box</title>
<style type="text/css">
.box {
/* basic styling */
width: 300px;
height: 95px;
border: 1px solid #555;
font: 14px Arial;
/* flexbox setup */
display: -webkit-box;
-webkit-box-orient: horizontal;
display: -moz-box;
-moz-box-orient: horizontal;
display: box;
box-orient: horizontal;
}
.box > div {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
/*width:100px;*/
-moz-transition: width 0.7s ease-out;
-o-transition: width 0.7s ease-out;
-webkit-transition: width 0.7s ease-out;
transition: width 0.7s ease-out;
}
/* our colors */
.box > div:nth-child(1){ background : #FCC; }
.box > div:nth-child(2){ background : #CFC; }
.box > div:nth-child(3){ background : #CCF; }
.box > div:hover {
width:200px;
}
</style>
</head>
<body>
<div class="box">
<div>deuxssssss</div>
<div>deux</div>
<div>deux</div>
</div>
</body>
</html>
demo地址：http://debug.cnodejs.net/html/1328843547100.html
问题是当.box > div的内容宽度不一样的时候，三个div并不是均分。
解决方式在.box > div中加上宽度即可，任何有效数值都行。只需保证.box下的子div宽度相等即可
但是问题又来了1动画没有了，2鼠标移上去div的宽度很怪异；
讨论得出的解决方案是：
- .box > div的宽度单位要和.box > div:hover的宽度单位一致，要么都是%要么都是px，否则没有动画；
- .box > div的宽度值相等，可以随意设置，每列就可以等宽；
- 根据实践得出，当3个div的宽度不一致（例如hover的时候）只有当3个div的总宽=box的宽度才回正确显示。如果3个div大于或者小于box宽度，三个div都会按照一定规则缩放，具体规则还有待研究。动手试试：http://debug.cnodejs.net/1328861122371
