Question

我试图弄清楚flexbox如何工作（应该工作？...），如下所示：

＆＃13;

.holder {
  width: 500px;
  background: lightgray;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.v2 {
  width: 320px;
}
.child {
  display: inline-block;
  border: 1px solid black;
  padding: 30px 0px;
  text-align: center;
}

＆＃13;

<div class="holder">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a
    <br>glance</div>
  <div class="child">After coverage
    <br>ends</div>
  <div class="child">Forms &amp;
    <br>documents</div>
</div>

＆＃13;

JSFiddle here

问题在于，当有足够的空间容纳元素时，我会得到一个很好的紧身儿童，两者之间的距离均匀。（首先，顶部div块）

然而，当没有足够的空间和儿童内部的文字开始包装时，这一切都有一个奇怪的方向 - 儿童不再紧密贴合，即使在包装后，还有足够的空间在儿童身边，因为不再适合，空间也没有机会工作（第二个div块）

然而，如果我在发生自动换行的地方添加手动换行符，那么所有内容都会被布局，因为它应该＆＃34; ...（底部，第三块）

我喜欢的是总是让孩子紧紧地装在他们的盒子里（黑色边框），并留下任何空间，均匀地分布在他们之间，而不必添加手动换行符（这不是在我的情况下的一个选项）

有可能吗？...

Answer 1

在CSS中，父容器不知道其子包装的时间。因此，它继续扩大其规模，不知道内部发生的事情。

换句话说，浏览器在初始级联上呈现容器。当孩子换行时，它不会重排文件。

这就是为什么容器没有收缩包装较窄的布局。它只是继续，似乎没有任何包裹，正如右边的保留空间所证明的那样。

水平空白区域的最大长度是容器期望在那里的元素的长度。

在下面的演示中，当窗口水平重新调整大小时，可以看到空白进出：DEMO

您需要一个JavaScript解决方案（请参阅here和here）...或CSS媒体查询（请参阅here）。

在处理文本包装时，容器上的text-align: right在某些情况下可能会有所帮助。

Answer 2

好好看看我改变的Fiddle：

.holder width至max-width（.v类）
将 .holder 修改为wrap及space-around其子女
为了清晰起见，又添加了2个 .v 类
删除了<br>'s
和最重要，将flex: 0 0添加到 .child

Flexbox几乎总是需要设置max-width，这比width更灵活。根据您.child人员的行为需求，修改flex-grow中的flex-shrink和flex: 0 0以满足您的需求。（flex: 1 0的结果看起来也不错）

...不需要Javascript ...

更新 Codrops Flexbox Reference真正帮助我理解FBL ......

Answer 3

你的块表现如此的原因是因为CSS渲染。

在你操作的第一种情况下，浏览器不知道块的内容何时变得太小。因此，它会一直延伸到最大值，然后呈现文本。

在你的最后一种情况下，你告诉浏览器在哪里打破，所以它知道元素不应该变宽。

您可以轻松解决此问题的唯一方法是自行设置休息。

Answer 4

如果您正在寻找仅CSS的解决方案，则可以使用width: 100px;之类的方法来设置子项和flex: auto;的最小宽度，以使其增大。

示例：https://jsfiddle.net/ncvp7gzs/1

（请注意，此功能仅在Chrome上经过测试）

在容器

4 个答案: