Flexbox:如何让divs填充100%的容器宽度而不包装？

Question

我正在更新旧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宽度来强制它以一种hacky,不灵活的方式执行我想要的操作200%.这适用于这个单独的例子,但在某些情况下我不会事先知道将有多少个子盒子,如果可能的话,我宁愿不在每个元素上使用内联样式.

Answer 1

要防止弹性项收缩,请将弹性收缩系数设置为0:

该弹性收缩因素决定了有多少的柔性项目将收缩相对于其余部分弯曲的物品时负的自由空间,分布在柔性容器.省略时,将其设置为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>

Answer 2

您可以使用速记flex属性并将其设置为

flex: 0 0 100%;

那就是flex-grow,flex-shrink并且flex-basis在一条线上.上面描述了柔性收缩,柔性增长是相反的,而柔性基础是容器的尺寸.

Answer 3

在我的情况下,只是使用flex-shrink: 0不起作用.但加入flex-grow: 1它有效.

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

Answer 4

设置flex-direction: column

您试图将项目堆叠在一列而不是一行中。

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