防止在flexbox子元素中包装线条

Question

如何防止Flexbox元素的换行？它甚至可能吗？

我正在尝试使用带有以下标记的flexbox创建一个双列网格:

<div class="flex-container">
   <div class="no-wrap">this should not wrap</div>
   <div class="can-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam debitis consequuntur incidunt neque vel in blanditiis id optio distinctio culpa rem voluptatibus quas architecto ratione assumenda omnis laboriosam? Earum esse.</div>
</div>

该.no-wrap元素应该只有它''需要'那样宽,以便内部的所有文本都不会换行到第二行.该.can-wrap元素将占用剩余空间,并在需要时进行换行.

我正在使用这个CSS(免费提供prefrix):

.flex-container{
  display:flex;
}

.no-wrap{
  flex-basis:initial;
}

我认为flex-basis:initial会阻止元素包裹线 - https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

这是一个codepen:http://codepen.io/jshawl/pen/bknAc

我知道我可以修复.no-wrap元素的宽度,但是如何让它足够宽以防止换行？

.no-wrap元素的浮点等价值为:

.no-wrap{
  display:block;
  float:left; /* be as wide as need be! */
}

Answer 1

您正在寻找的属性是flex-shrink,而不是flex-basis.

.no-wrap{
  flex-shrink: 0;
}

但请注意,IE10未列为支持此属性(因为它在添加Flexbox实现时在规范中不存在).您可以改用flex属性.

.no-wrap{
  flex: 0 0 auto; 
}

Answer 2

如果该flex-shrink属性无法解决您的问题，请尝试将white-space设为nowrap。

.no-wrap {
  white-space: nowrap
}

pre如果您想保留新行，也可以使用（与 不同nowrap）。