Flexbox：如何使div填满容器宽度而不换行？

Question

我正在将一个旧的基于inline-block的网格模型更新为更新的Flexbox模型。除了一个小问题外，一切都很顺利，这个小问题已经成为了一个非常棘手的问题。

我有一堆由CSS控制的滑块;所以有一个包含100%宽度的包装器，并且里面有另一个div：它的宽度也是100％，但它的white-space设置为nowrap。使用inline-block，这意味着内部

（它们也设置为100％宽度）不会受到其父元素约束并换行到下一行-它们只会继续流动出框。这正是我想要的。然而，我无法通过flexbox使此功能正常工作。以下是参考图像：

参考jsFiddle中的内容，使用inline-block可以正常工作：http://jsfiddle.net/5zzvqx4b/

而使用Flexbox则不能正常工作：http://jsfiddle.net/5zzvqx4b/1/

我尝试了各种变化，包括flex、flex-basis、flex-wrap和flex-grow等，但是我无论如何都无法使其正常工作。

请注意，我可以通过将.boxcontainer的宽度设置为200％来强制其按照我的意愿进行。这适用于此单个示例，但在某些情况下，我不会事先知道将有多少个子框，并且如果可能，我不希望使用每个元素上的内联样式。

- indextwo

---

不是一个答案，但是为什么你想要改变flex呢？你已经有一个工作正常且没有前缀的代码了，而且可以在更多的浏览器上运行。 - Stickers

@sdcr：由于项目的其他要求，大约有2万行代码，可能需要一些时间才能进入。 - indextwo

哦，好的，只是想说你设置的一些 flex 属性其实并不必要，比如 flex-direction: row;、justify-content: flex-start;、align-items: flex-start; 这些都是默认规则，除非你要覆盖它们。这里有一个很棒的指南 链接。 - Stickers

@sdcr：谢谢 - 在那个例子中确实非常冗长，但这只是因为我直接从我的样式表中复制粘贴过来，其中包含了许多条件和子类等，所以属性是显式设置的。我还不太了解flexbox，无法凭借记忆写出来！ - indextwo

如果有意义的话，请注意，Flex的浏览器支持是IE10+，需要使用-ms*前缀。 - Stickers

好问题！我自己也一直在想这个问题。从来不知道 flex-shrink 属性是如何工作的。 - HartleySan

Answer 1

为防止 flex 项目收缩，请将 flex 收缩系数 设为 0：

Flex 收缩系数 决定了当分配负空间时，相对于 flex 容器中其他 flex 项目，flex 项目 将收缩多少。如果省略，则默认为 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>

- Oriol

Answer 2

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

flex: 0 0 100%;

这是一行中的 flex-grow、flex-shrink 和 flex-basis。弹性缩小（Flex shrink）已经在上面介绍过了，而弹性增长（Flex grow）则相反，弹性基础（Flex basis）是容器的大小。

- Nick Salloum

Answer 3

在我的情况下，仅使用flex-shrink: 0并不能生效。但是给它添加flex-grow: 1可以生效。

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

- Xpleria

Answer 4

设置flex-direction: column

您想要使项目垂直列排列而不是水平行排列。

{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

- Aditya Mittal

Answer 5

另一个需要注意的事项是flex容器的大小（用于背景宽度/高度和块的上下文大小），可以使用display:inline-flex;来解决。

- user3007439