当Flexbox项目包装文本时，项目填充容器并在末尾有额外的空白区域

使用flexbox布局时，我有一个包含三个div的容器。我要去的是第一个div容器的左边缘，而其余两个div依靠在容器的右边缘。我承认使用flex布局非常新，但看起来很简单。当Flexbox项目包装文本时，项目填充容器并在末尾有额外的空白区域

简单的HTML：

<div class="container"> 
    <div class="one">Left</div> 
    <div class="two">Middle</div> 
    <div class="three">Right</div> 
</div>

和相关的CSS：

.container{ 
    display: flex; 
    align-items: center; 
} 

.one{ 
    margin-right:auto; 
}

上面的代码通常显示完全按照预期，并且在大多数情况下是完美的。例如，如果遇到麻烦，那么第三个项目有足够的文本可以包装。发生这种情况时，第三项填充文本右侧的空白，在项目1和项目2之间不留空间。它用细小的单词很微妙，但有两个大的单词在中间突然出现很明显。下面的codepen解释它比我更好。

Codepen显示问题：http://codepen.io/camwheel/pen/XjjyOx

我是不是滥用/误用在这里柔性语法，或有与柔性项文本包裹一个合法的问题？更重要的是，在短期内，我能做些什么来解决这个问题？

来源

2016-09-19 zero

也许将弹性项目设置为内容大小（即'flex：0 0 auto'）：http://codepen.io/anon/pen/qaaLkW –

@Michael_B：我考虑过这个，但它使文本流在定义区域之外。在一个固定宽度的部分，这意味着推入其他区域，而对于全屏页面，这意味着侧滚动，这将不会飞。 – zero

问题是，在CSS中，父级不知道孩子什么时候换行，所以它不会收缩缩小的内容。它只是继续，好像孩子仍然在那里（因此右边的预留空间）。更多详细信息[** here **]（http://stackoverflow.com/a/37413580/3597276）。 JS可以提供帮助。 –

上的最后一个项目

text-align: right

As Michael_B p在评论中提到，这不是一个弹性问题。这归结于CSS的限制。父项不知道子项收缩的时间（发生在文本换行时发生的宽度），因此无法折回。有关更深入的评估，请参阅他之前的文章here。

来源

2016-09-22 16:08:12 zero

如果您的div只包含文本，那么你可以做到以下几点：

跳过弯曲中间元素

.container { 
 
    display: flex; 
 
    background: salmon; 
 
} 
 

 
.one, .two { 
 
    flex: 1; 
 
} 
 

 
.two { 
 
    text-align: right; 
 
}

<div class="container"> 
 
    <div class="one">Left</div> 
 
    <div class="two">Middle</div> 
 
    <div class="three">Right</div> 
 
</div>

来源

2016-09-19 23:38:52

当Flexbox项目包装文本时，项目填充容器并在末尾有额外的空白区域

回答

相关问题