我正在将一个旧的基于inline-block的网格模型更新为我创建的一个新的Flexbox模型，一切都运行良好，除了一个小障碍，它有点破坏交易：
我有一堆CSS控制的滑块所以有一个100%宽度的包含 Package 器，里面是另一个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%，以一种笨拙、不灵活的方式强迫它做我想做的事情。这对这个示例有效，但在某些情况下，我无法事先知道将有多少子框，如果可能，我宁愿不对每个元素采用内联样式。
4条答案
按热度按时间izj3ouym1#
要防止弹性项目收缩，请将弹性收缩因子设置为
0：弹性收缩系数确定分配负可用空间时，弹性项相对于弹性容器中其余弹性项的收缩量。如果省略，则将其设置为1。
x一个一个一个一个x一个一个二个x
cnwbcb6i2#
您可以使用简写flex属性并将其设置为
flex-grow、flex-shrink和flex-basis在一行中，上面描述了Flex收缩，Flex增长是相反的，Flex基础是容器的大小。jq6vz3qz3#
在我的例子中，仅仅使用
flex-shrink: 0是不行的，但是添加flex-grow: 1可以。siv3szwd4#
设置
flex-direction: column您正在尝试将项目堆叠在列中而不是行中。