Flexbox：如何使div无需包装即可填充容器宽度的100％？ [英] Flexbox: how to get divs to fill up 100% of the container width without wrapping?

问题描述

我正在更新旧的基于内联块的网格模型，我必须将其更新为我创建的新的Flexbox。除了一点点障碍之外，其他一切都运行良好。

I'm in the process of updating an old inline-block-based grid model I have to a newer Flexbox one I created. Everything has worked fine, apart from one little snag, which has become a bit of a dealbreaker:

我有一堆CSS控制的滑块；因此，有一个包含100％宽度的包含包装器，而内部是另一个div：其宽度也是100％，但其空格设置为 nowrap 。使用 inline-block ，这意味着内部div（也设置为100％宽度）将不受父母的约束。约束并包装到下一行-它们只是继续进行开箱即用。这正是我想要的。但是，我完全无法使它与flexbox一起使用。作为参考，下面是一张图片：

I have a bunch of CSS-controlled sliders; so there's a containing wrapper with 100% width, and inside is another div: its width is also 100%, but its white-space is set to nowrap. Using inline-block, this meant that the internal divs (which were also set to 100% width) wouldn't be bound by their parents' constraints and wrap onto the next line - they'd just carry on flowing out of the box. This is exactly what I wanted. However, I cannot get this to work at all with flexbox. For reference, here's an image:

作为参考，这是jsFiddle与内联代码一起工作的内容： http://jsfiddle.net/5zzvqx4b/

And for reference, here's a jsFiddle of the thing working with inline-block: http://jsfiddle.net/5zzvqx4b/

...和 not 与Flexbox配合使用： http://jsfiddle.net/5zzvqx4b/1/

...and not working with Flexbox: http://jsfiddle.net/5zzvqx4b/1/

我尝试了 flex ， flex-basis ，的各种变体flex-wrap ， flex-grow 等，但是对于我一生来说，我无法使用它。

I've tried all kinds of variations with flex, flex-basis, flex-wrap, flex-grow, etc. but for the life of me I can't get this to work.

请注意，我可以通过设置 .boxcontainer强制其以一种不灵活，不灵活的方式执行我想做的事情。 宽度设置为 200％。这适用于单个示例，但是在某些情况下，我事先不知道会有多少个子框，如果可能的话，我宁愿不对每个元素采用内联样式。

Note that I can force it to do what I want in a hacky, inflexible way by setting the .boxcontainer width to 200%. That works for this single example, but in some cases I won't know beforehand how many child boxes there will be, and I'd rather not resort to inline styling on each element if possible.

推荐答案

为防止flex项收缩，请设置弹性收缩系数到 0 ：

To prevent the flex items from shrinking, set the flex shrink factor to 0:

弹性收缩系数确定弹性商品将使
相对于容器中的item rel = noreferrer> flex项目。如果省略，则
设置为1。

The flex shrink factor determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to 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>

这篇关于Flexbox：如何使div无需包装即可填充容器宽度的100％？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！