2

我的结构如下：

<div class="_flex_box">
    <div class="_flex_box_item_1">Stuff</div>
    <div class="_flex_box_item_1">Other Stuff</div>
</div>

通常，这会以 50% 的宽度并排拆分 div。但它不起作用......有人有任何想法吗？基本上，不是每个 50%，而是不同项目的 70/30 或 60/40。

CSS 如下所示（我使用的是 Sass 和 Bourbon.io）

._flex_box {
  @include display-box;
  @include box-orient(horizontal);
  @include box-align(stretch);
  ._flex_box_item_1 {
    display: block;
    @include box-flex(1);
  }
}
4

2 回答 2

3

于是我找到了答案！

似乎这与弹性盒子的实现有关，但我可以通过将 ._flex_box_item_1 宽度设置为 100% 来解决它；

._flex_box {
  @include display-box;
  @include box-orient(horizontal);
  @include box-align(stretch);
  ._flex_box_item_1 {
    display: block;
    @include box-flex(1);
    width: 100%;
  }
}

这绝对不是总是必要的，但如果您在 Moovweb 项目中遇到此问题，可能会起作用。

于 2013-06-20T00:05:11.487 回答
2

在不指定宽度的情况下，弹性项目将占用所需的空间，然后 flex-grow 和 flex-shrink 属性确定它们的最终宽度。如果一个项目需要 70% 而另一个只需要 30%，那么这就是它们将占用的空间量。

如果您希望您的弹性项目成为其弹性容器的特定百分比，则必须指定它。

.flex-item {
  width: 50%; // works with either Flexbox
  box-flex: 1; // deprecated Flexbox
  flex: 1 1 50%; // standard Flexbox
}
于 2013-06-20T00:41:37.400 回答