防止在 flexbox 子元素中换行答案

【问题标题】：prevent wrapping lines in flexbox child element防止在 flexbox 子元素中换行
【发布时间】：2013-08-22 19:19:53
【问题描述】：

如何防止 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（无前缀）：

.flex-container{
  display:flex;
}

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

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

这是一个代码笔：http://codepen.io/jshawl/pen/bknAc

我知道我可以修复.no-wrap 元素的宽度，但我怎样才能让它足够宽以防止换行呢？

.no-wrap 元素的等效浮点数是：

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

【问题讨论】：

标签： css flexbox

【解决方案1】：

您要查找的属性是 flex-shrink，而不是 flex-basis。

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

但是请注意，IE10 并未被列为支持该属性（因为在他们添加 Flexbox 实现时，规范中不存在该属性）。您可以改用 flex 属性。

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

【讨论】：