Flexbox：如何让 div 在不换行的情况下填充 100% 的容器宽度？

Posted 2023-03-06

【中文标题】Flexbox：如何让 div 在不换行的情况下填充 100% 的容器宽度？

【英文标题】：Flexbox: how to get divs to fill up 100% of the container width without wrapping?

【发布时间】：2015-08-21 11:31:19

【问题描述】：

我正在更新一个旧的基于inline-block 的网格模型，我必须使用我创建的一个较新的 Flexbox 模型。一切都很好，除了一个小障碍，这已经成为一个破坏者：

我有一堆 CSS 控制的滑块；所以有一个 100% 宽度的包含包装器，里面是另一个 div：它的宽度也是 100%，但它的 white-space 设置为 nowrap。使用inline-block，这意味着内部 div（也设置为 100% 宽度）不会受到其父母的约束并换行到下一行 - 他们只会携带开箱即用。这正是我想要的。但是，我根本无法让它与 flexbox 一起工作。供参考，这是一张图片：

作为参考，这里有一个使用 inline-block 的 jsFiddle：http://jsfiddle.net/5zzvqx4b/

...不使用 Flexbox：http://jsfiddle.net/5zzvqx4b/1/

我已经尝试了flex、flex-basis、flex-wrap、flex-grow 等的各种变体，但对于我的生活，我无法让它发挥作用。

请注意，我可以通过将.boxcontainer 宽度设置为200% 来强制它以一种笨拙、不灵活的方式执行我想要的操作。这适用于这个单个示例，但在某些情况下，我不会事先知道会有多少子框，并且如果可能的话，我宁愿不要对每个元素使用内联样式。

【问题讨论】：

... 不是答案，但是为什么要更改 flex，您已经有一个没有前缀的工作代码，并且可以在更多浏览器上工作？

@sdcr：由于项目的其他要求，大约 20,000 行代码，可能需要一段时间才能进入。

哦，好吧，只是说您在那里设置的一些 flex 属性甚至没有必要，例如 flex-direction: row;、justify-content: flex-start;、align-items: flex-start; 这些是默认规则，除非您重新覆盖它们。有一个很棒的指南here。

@sdcr：谢谢——在那个例子中确实非常冗长，但这只是因为我直接从我的样式表中复制粘贴它，其中有很多条件和子类等。这就是明确设置属性的原因。我对 flexbox 的了解还不够充分，无法将其从头顶上写下来！

是有道理的，请注意，浏览器对 flex 的支持是带有 -ms* 前缀的 IE10+。

【参考方案1】：

为防止弹性项目收缩，请将flex shrink factor 设置为0：

弹性收缩系数决定了flex item 的大小 相对于 flex 中的 flex items 的其余部分收缩 分配负可用空间时的容器。省略时为 设置为 1。

.boxcontainer .box 
  flex-shrink: 0;

* 
  box-sizing: border-box;

.wrapper 
  width: 200px;
  background-color: #EEEEEE;
  border: 2px solid #DDDDDD;
  padding: 1rem;

.boxcontainer 
  position: relative;
  left: 0;
  border: 2px solid #BDC3C7;
  transition: all 0.4s ease;
  display: flex;

.boxcontainer .box 
  width: 100%;
  padding: 1rem;
  flex-shrink: 0;

.boxcontainer .box:first-child 
  background-color: #F47983;

.boxcontainer .box:nth-child(2) 
  background-color: #FABCC1;

#slidetrigger:checked ~ .wrapper .boxcontainer 
  left: -100%;

#overflowtrigger:checked ~ .wrapper 
  overflow: hidden;

<input type="checkbox" id="overflowtrigger" />
<label for="overflowtrigger">Hide overflow</label><br />
<input type="checkbox" id="slidetrigger" />
<label for="slidetrigger">Slide!</label>
<div class="wrapper">
  <div class="boxcontainer">
    <div class="box">
      First bunch of content.
    </div>
    <div class="box">
      Second load  of content.
    </div>
  </div>
</div>

【讨论】：

天哪谢谢。我实际上忽略了flex-shrink 属性，因为我读过的描述似乎并不相关。认为自己在... 6 分钟内被接受！

【参考方案2】：

您可以使用简写的 flex 属性并将其设置为

flex: 0 0 100%;

flex-grow、flex-shrink 和 flex-basis 在一行中。上面介绍了flex的收缩，flex的增长是相反的，flex的基础是容器的大小。

【讨论】：

太棒了！超级好用。

【参考方案3】：

就我而言，仅使用 flex-shrink: 0 是行不通的。但是添加flex-grow: 1 是有效的。

.item 
    flex-shrink: 0;
    flex-grow: 1;