1

网上存在有关CSS3box和. 据我了解，这是目前的草案方法。所以在 webkit 上我们使用, ...flexboxflexflexdisplay: -webkit-flex-webkit-flex: 1 auto

但我的问题是：我如何使用类似box-pack: starton 的东西flex？

看看这个例子（仅限 webkit）。我需要把它打包到顶部，但它正在蔓延。它将类似于这个 hackish 示例（但对我的情况不利，难以维护）。我该如何解决？

需要修复

HTML

<div class="body">
    <h1>Test</h1>
    <div class="box" style="width: 80%"></div>
    <div class="box" style="width: 20%"></div>
    <div class="box" style="width: 20%"></div>
    <div class="box" style="width: 20%"></div>
    <!-- (NEED TO FIX) EMPTY SPACE -->
</div>

CSS

h1 {
    -webkit-flex: 1 100%;
}

.body {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    height: 400px;
}

所以请注意，需要使用第 1 行、第 2 行和第 3行h1的所有空间将转到第 3行的第 2 行、第 4 行和第 5行，我需要（大于内容，高度）在底部有一个空白空间。.box.box.body

HACKISH解决方案:-(

HTML

<div class="body">
    <h1 style="height: 40px;">Test</h1>
    <div class="box" style="width: 80%; height: 20px;"></div>
    <div class="box" style="width: 20%; height: 20px;"></div>
    <div class="box" style="width: 20%; height: 20px;"></div>
    <div class="box" style="width: 20%; height: 20px;"></div>
    <div class="hackish"></div>
    <!-- NOTE THIS .hackish :-( -->
</div>

CSS

.hackish {
    width: 100%;
    height: 100%;
}

那么，有什么解决办法吗？

4

1 回答 1

2

写完所有并在这里创建示例后，我在 5 秒后找到了解决方案。呃……

我可以简单地使用-webkit-align-content: flex-start（.bodyW3 Flexbox - Align Content）。所以这是解决方案：

.body {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    height: 400px;

    -webkit-align-content: flex-start;
}

看到这个工作。

于 2013-03-25T19:33:53.233 回答