Question

我的结构如下：

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

通常，这会将divs并排分开，每个宽度为50％。但它不起作用......任何人都有任何想法？基本上，不是每个50％，而是70/30或60/40不同的项目。

CSS看起来如下（我正在使用Sass＆amp; 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

所以我找到了答案！

这似乎与弹性框的实现有关，但我可以通过将._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项目中遇到此问题，则可能会有效。

Answer 2

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

如果您希望Flex项目是其Flex容器的特定百分比，则必须指定它。

.flex-item {
  width: 50%; // works with either Flexbox
  box-flex: 1; // deprecated Flexbox
  flex: 1 1 50%; // standard Flexbox
}

我正在使用Moovweb柔性盒，但尺寸不正常......发生了什么？

2 个答案: