我正在使用 Moovweb 弹性盒子，但尺寸不能正常工作……发生了啥？

Posted 2023-03-07

【中文标题】我正在使用 Moovweb 弹性盒子，但尺寸不能正常工作……发生了啥？

【英文标题】：I'm using Moovweb flex boxes but the sizes aren't working properly... what's happening?我正在使用 Moovweb 弹性盒子，但尺寸不能正常工作……发生了什么？

【发布时间】：2013-06-16 16:26:33

【问题描述】：

我的结构如下：

<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);
  
 

【问题讨论】：

这些是已弃用的 2009 年 Flexbox 草案中的属性。请不要在未提供标准属性的情况下使用它们：w3.org/TR/css3-flexbox

【参考方案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 项目中遇到此问题，它可能会起作用。

【参考方案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