css - 我正在使用 Moovweb flex 盒子，但尺寸无法正常工作……发生了什么事？

Question

我的结构如下:

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

通常，这会将 div 并排拆分为每个 50% 的宽度。但它不起作用......有人有任何想法吗？基本上，不同元素的比例不是 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);
  }
} 

Answer 1

所以我找到了答案!

这似乎与 flexbox 的实现有关，但我可以通过将 ._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 元素中遇到此问题，则可能会起作用。