使容器缩小
我想弄清楚Flexbox是如何工作的（应该可以工作？...），例如下面的例子：
.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;
}<div class="holder">
<div class="child">At a glance</div>
<div class="child">After coverage ends</div>
<div class="child">Forms & 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 & 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 &
<br>documents</div>
</div>在CSS中，父容器不知道其子包装的时间。 因此，它会继续扩大其规模而忽视内部发生的事情。
换句话说，浏览器在最初的级联上呈现容器。 当孩子包装时，它不会回流文件。
这就是为什么容器不收缩缩小布局的原因。 它只是继续下去，就好像没有任何包裹一样，正如右侧的预留空间所证明的那样。
水平白色空间的最大长度是容器预期存在的元素的长度。
在下面的演示中，当窗口水平重新调整大小时，可以看到空白的来来往往： DEMO
您需要一个JavaScript解决方案（请参阅此处和此处 ）或CSS媒体查询（请参阅此处 ）。
在处理包装文本时，在某些情况下，容器上的text-align: right可能会有所帮助。
为什么你的块的行为是这样的，因为CSS渲染。
在你的第一个案例中，浏览器并不知道块的内容何时变得太小。 所以它不断伸展，直到达到最大值，然后渲染文本。
在你的最后一种情况下，你告诉浏览器在哪里破坏，所以它知道元素不应该变宽。
你可以轻松解决这个问题的唯一方法就是自己设定休息时间。
仔细看看我改变的小提琴：
.holder width到max-width （在.v类中） .holder来wrap和space-around它的孩子 .v类 <br>'s flex: 0 0添加到.child Flexbox几乎总是需要设置max-width ，这比width更灵活。 根据您需要.child ren的行为方式，在flex: 0 0修改flex-grow和flex-shrink以满足您的需求。 （ flex: 1 0的结果flex: 1 0看起来不错）
...没有Javascript需要...
更新 Codrops Flexbox参考确实帮助我理解了FBL ...
链接地址: http://www.djcxy.com/p/75681.html