Question

有人可以告诉我这里我做错了什么吗？我希望盒子在divA和divB之间是完全相同的宽度。只是因为divB框在'p2'中的文字略长，不应该改变整个框的宽度。我不想为'p1'使用硬像素宽度，因此它可以灵活地用于视口宽度。我只想让p1盒子总是p2的一半大小，不管内容是多少。有人可以帮助我或提出更好的方法吗？

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css"> 
div
{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
width:100%;
border:1px solid black;
}

#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
box-flex:1.0;
text-align:right;
border:1px solid red;
}

#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
box-flex:2.0;
text-align:left;
border:1px solid blue;
}
</style>
</head>
<body>

<div id='divA'>
<p id="p1">Hello</p>
<p id="p2">Column 2</p>
</div>

<div id='divB'>
<p id="p1">Hello</p>
<p id="p2">Why is this box larger</p>
</div>

</body>
</html>

Answer 1

如果给孩子一个明确的宽度，他们就会表现出来 flex值将覆盖这些宽度，为您提供所需的布局。这些盒子只需要一个值来开始。如果没有定义的宽度，它们会收缩到其内容的宽度，然后应用flex值。

见这里：http://jsfiddle.net/ZBE7r/

...
#p1, #p2 {
    width: 1px;
}
...

只有当它们都具有相同的显式宽度时才有效（可以是任何值：0,1px，100％等）

Answer 2

找到这个报价。这可以解释为什么会这样做。

“这听起来像预期的那样工作。只有在计算了盒子的首选尺寸后才会应用屈曲。所以在你的例子中听起来总盒子宽度加起来比容器宽度大得多。然后浏览器使用flex属性来决定压缩哪些框以使它们适合。你的中间框具有最大的弹性，因此它被压扁最多“link

Answer 3

如果您将p代码更改为div代码，它似乎可以按预期工作。似乎flexbox通过首先检查元素的初始宽度，然后按比例填充剩余空间来计算宽度。两者都是块级元素，因此我不确定为什么它们的处理方式不同，但它应该可以解决您的问题。

CSS3 box-flex - box大小因内部内容而异

3 个答案: