我正在使用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 
}