防止在flexbox子元素中换行 [英] prevent wrapping lines in flexbox child element

问题描述

如何防止flexbox元素换行？

How do I prevent line wrapping of a flexbox element? Is it even possible?

我正在尝试使用具有以下标记的flexbox创建两列网格：

I'm attempting to create a two column grid with flexbox with the following markup:

<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 元素将占用剩余空间，并在需要时进行包装。

The .no-wrap element should only be as wide as it 'needs to be' such that all of the text inside does not wrap to a second line. The .can-wrap element will take up the remaining space, and wrap if need be.

我是使用此CSS（不带prefrix）：

I'm using this CSS (with prefrix free):

.flex-container{
  display:flex;
}

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

我认为 flex-basis：initial 可以防止元素换行- https： //developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis

I thought the flex-basis:initial would prevent the element from wrapping lines - https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

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

我知道可以固定 .no-wrap 元素的宽度，但是如何使它足够宽以防止换行呢？

I know I can fix the width of the .no-wrap element, but how can I make it be as wide enough to prevent line wrapping?

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

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

推荐答案

您所拥有的财产寻找的是 flex-shrink ，而不是 flex-basis 。

The property you are looking for is flex-shrink, not flex-basis.

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

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

Note however, that IE10 is not listed as supporting this property (as it did not exist in the specification at the time they added the Flexbox implementation). You can use the flex property instead.

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

这篇关于防止在flexbox子元素中换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！