Flexbox:如何让 div 填充 100% 的容器宽度而不换行? [英] Flexbox: how to get divs to fill up 100% of the container width without wrapping?

问题描述

我正在将旧的基于 inline-block 的网格模型更新到我创建的较新的 Flexbox 模型.一切都运行良好，除了一个小问题，这已经成为一个交易破坏者:

我有一堆 CSS 控制的滑块；所以有一个包含 100% 宽度的包装器，里面是另一个 div:它的宽度也是 100%，但它的 white-space 设置为 nowrap.使用 inline-block，这意味着内部 div(也 设置为 100% 宽度)将不受其父项的约束并换行到下一个线 - 他们只是继续开箱即用.这正是我想要的.但是，我无法在 flexbox 中使用它.作为参考，这是一张图片:

作为参考，这里有一个使用内联块的 jsFiddle:http://jsfiddle.net/5zzvqx4b/

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

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

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

解决方案

为了防止 flex 项收缩，请设置 flex 收缩系数 到 0:

<块引用>

弹性收缩系数决定了弹性项目 将相对于 flex 中的其余 flex items 收缩分配负可用空间时的容器.省略时为设置为 1.

.boxcontainer .box {弹性收缩:0；}

* {box-sizing: 边框框；}.包装{宽度:200px；背景颜色:#EEEEEE；边框:2px 实心 #DDDDDD；填充:1rem；}.boxcontainer {位置:相对；左:0；边框:2px 实心 #BDC3C7；过渡:全0.4s缓动；显示:弹性；}.boxcontainer .box {宽度:100%；填充:1rem；弹性收缩:0；}.boxcontainer .box:first-child {背景颜色:#F47983；}.boxcontainer .box:nth-child(2) {背景颜色:#FABCC1；}#slidetrigger:checked ~ .wrapper .boxcontainer {左:-100%；}#overflowtrigger:checked ~ .wrapper {溢出:隐藏；}

<label for="overflowtrigger">隐藏溢出</label><br/><input type="checkbox" id="slidetrigger"/><label for="slidetrigger">滑动！</label><div class="wrapper"><div class="boxcontainer"><div class="box">第一批内容.

<div class="box">第二次加载内容.

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:

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:

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

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

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.

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.

解决方案

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

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屋！