4

试着想象一种情况

有一个 div ，容器内有三个 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-1 a-2 a-3 长度不相等。它似乎也取决于文本长度。

怎么解决？

4

3 回答 3

10

看起来您误解了灵活框布局的目的。它通过占用包含元素中未使用的空间并将其添加到其子元素中来工作。因此，例如，如果您的包含框是 300 像素，并且您最初有 80 像素、100 像素和 60 像素的三个元素，那么您有 300-80-100-60 = 60 像素。然后，如果您的三个子元素的 flex 值都为 1，那么它会为每个子元素分配 60/(3*1) = 20px。所以子尺寸现在是 100px、120px 和 80px。

对于您的示例，由于您希望它们大小相同，您应该将所有三个孩子的 -webkit-box-flex 设置为 0，但将它们的宽度（或高度，如果合适）设置为 33.33%。

于 2011-08-21T08:00:21.100 回答
5

有时我不知道元素中的元素数量，但我仍然希望它们均匀布置。例如，如果我有 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%;
}
于 2012-06-06T20:44:30.837 回答
0

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

于 2011-07-21T13:27:46.440 回答