柔性容器的剩餘空間（不是全寬度）中的柔性物品水平居中

Question

我得到了一個響應式設計，其中有3個項目連續排列。如果屏幕變小，第一個將被刪除。所以這3個項目分配flexbox和justify-content:space-between，這使得外側項目綁定到側面和中間項目居中。現在，如果第一個項目被刪除，我想成爲右側的正確的項目，左側​​的項目居中左側的空間。

這是我的3個項目代碼：

<div style="display:flex;flex-flow:row;justify-content:space-between;align-items:center"> 
    <span style="width:70px;text-align:right">To the left</span> 
    <div style="height:40px;width:100px;background-color:red">Center</div> 
    <span style="width:70px;text-align:right">To the right</span>  
</div> 

而且這兩個項目：

<div style="display:flex;flex-flow:row;justify-content:space-between;align-items:center"> 
    <div style="height:40px;width:100px;background-color:red">Center</div> 
    <span style="width:70px;text-align:right">To the right</span>  
</div> 

我得到了一些搗鼓你：https://jsfiddle.net/msLd7g5j/1/

編輯：請注意，這不是重複的，至少不是你指出的那個，因爲我想把左邊的項目集中到「剩餘」而不是絕對居中的空間。

解決方案：我有一個新的小提琴：https://jsfiddle.net/msLd7g5j/2/

我只是不刪除第三個元素，而不是我刪除的內容，這樣的元素看起來像

`<span> </span>` 

的Flexbox的只是它並將中間元素居中置於相對中間，並設置justify-content:space-between。

Answer 1

所以，你想：

...右邊右邊的項目，並集中到留在 空間左邊的項目。

...左側項目以「剩餘」爲中心，而不是以絕對中心 爲中心。

您的解決方案（發佈在答案的底部）看起來不錯。您從第一個彈性項目中移除所有內容，並將其設爲零width。使用justify-content: space-between時，它將容器左邊緣和下一個元素左邊緣之間的第二個彈性項目居中。這似乎很好地工作。

另一種方法是刪除第一個彈性項目（display: none）。將中間彈性項目的內容包裝在span中。將所有內聯樣式從父級移到子級。然後將width: 100%; text-align: center;應用於父項。

<div style="display:flex; flex-flow:row; justify-content:space-between;align-items:center"> 
    <span style="text-align:right; display: none;"> </span> 
    <div style="width: 100%; text-align: center;"><span style="display: inline-block; 
        width:100px; background-color:blue; height: 40px;">Center</span></div> 
    <span style="width:70px;text-align:right">To the right</span> 
</div> 

DEMO：https://jsfiddle.net/msLd7g5j/4/