Question

试着想象一下情况

有一个div，容器里面有三个div，

有时我们需要让内部自我适应。

像这样

的CSS：

.a{display:-webkit-box;width:300px;height:100px;background:#222}
.a div{-webkit-box-flex:1;height:100px}
.a-1{background:red}
.a-2{background:yellow}
.a-3{background:blue}

HTML：

<div class="a">
    <div class="a-1">abc</div>
    <div class="a-2">abcdddd</div>
    <div class="a-3">abcdddddddde</div>
</div>

但是a-1，a-2，a-3不自适应。意思是a-1a-2a-3的长度不相等。它似乎也取决于文本长度。

如何解决？

Answer 1

看起来你误解了灵活的盒子布局的目的。它的工作原理是获取包含元素中未使用的空间并添加到其子元素中。因此，例如，如果您的包含框是300px，并且您有三个元素，最初是80px，100px和60px，那么您有300-80-100-60 = 60px。然后，如果您的三个子元素的flex值都为1，那么它将为每个元素分配60 /（3 * 1）= 20px。所以孩子的大小现在是100px，120px和80px。

对于您的示例，正如您希望它们具有相同的大小，您应该为所有三个子项将-webkit-box-flex设置为0，但是将它们的宽度（或适当的高度）设置为每个33.33％。

Answer 2

在某些情况下，我不知道元素中元素的数量，但我仍然希望它们能够均匀布局。例如，如果我有3个元素，它们的宽度将是33％，但对于4个元素，宽度将是25％。为了解决这个问题，我首先将宽度设置为1％，然后将flex设置为1.

.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
}

.flex-element {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
width: 1%;
}

Answer 3

我认为您需要将display: -webkit-box添加到.a div{-webkit-box-flex:1;height:100px}

关于显示的东西：-webkit-box; -webkit-箱-FLEX：1

3 个答案: