當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項目包裝文本時，項目填充容器並在末尾有額外的空白區域

回答

相關問題