我正在使用Moovweb弹性盒，但大小不能正常工作......发生了什么？

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如下所示（我用无礼的话& 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 
}