CSS Flexbox：如何让 div 填充 100% 的容器宽度而不换行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30684759/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox: how to get divs to fill up 100% of the container width without wrapping?
提问by indextwo
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:
我正在将旧的inline-block基于网格模型更新为我创建的较新的 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-spaceis set to nowrap. Using inline-block, this meant that the internal divs (which were alsoset 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:
我有一堆 CSS 控制的滑块；所以有一个包含 100% 宽度的包装器，里面是另一个 div：它的宽度也是 100%，但它white-space被设置为nowrap. 使用inline-block，这意味着内部 div（也设置为 100% 宽度）不会受到其父项的约束并换行到下一行 - 它们只是继续流出框外。这正是我想要的。但是，我无法在 flexbox 中使用它。作为参考，这是一张图片：
And for reference, here's a jsFiddle of the thing working with inline-block: http://jsfiddle.net/5zzvqx4b/
作为参考，这里有一个使用内联块的 jsFiddle：http: //jsfiddle.net/5zzvqx4b/
...and notworking with Flexbox: http://jsfiddle.net/5zzvqx4b/1/
...并且不使用 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.
我已经尝试了, , , 等的各种变体flex，但对于我的生活，我无法让它发挥作用。flex-basisflex-wrapflex-grow
Note that I canforce it to do what I want in a hacky, inflexible way by setting the .boxcontainerwidth 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.
请注意，我可以通过将.boxcontainer宽度设置为200%. 这适用于这个单个示例，但在某些情况下，我不会事先知道将有多少个子框，如果可能的话，我宁愿不诉诸于每个元素的内联样式。
回答by Oriol
To prevent the flex items from shrinking, set the flex shrink factorto 0:
为防止 flex 项目收缩，请将flex 收缩因子设置为0：
The flex shrink factordetermines how much the flex itemwill shrink relative to the rest of the flex itemsin the flex container when negative free space is distributed. When omitted, it is set to 1.
该弹性收缩因素决定了有多少的柔性项目将收缩相对于其余部分弯曲的物品时负的自由空间，分布在柔性容器。当省略时，它被设置为 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>回答by Nick Salloum
You can use the shorthand flex property and set it to
您可以使用速记 flex 属性并将其设置为
flex: 0 0 100%;
That's flex-grow, flex-shrink, and flex-basisin one line. Flex shrink was described above, flex grow is the opposite, and flex basis is the size of the container.
那是flex-grow, flex-shrink, 并flex-basis在一行中。上面已经介绍了 flex 收缩，flex 增长则相反，flex 基础是容器的大小。
回答by Xpleria
In my case, just using flex-shrink: 0didn't work. But adding flex-grow: 1to it worked.
就我而言，仅仅使用flex-shrink: 0是行不通的。但是添加flex-grow: 1它起作用了。
.item {
flex-shrink: 0;
flex-grow: 1;
}
