同一行和同一容器中的中心對齊元素

Question

是否有任何方法在同一行上將元素左對齊，居中對齊和右對齊，而不將元素分隔到單獨的容器中。爲了對一個元素進行右對齊，我知道我可以直接在元素上使用pull-right來浮動元素;但是我無法集中元素。我使用bootstrap，但純粹的CSS解決方案也可以。

換句話說，我知道這個工程：https://jsfiddle.net/u69rz06s/3/

<div class="row"> 
    <div class="col-xs-4"> 
    <button>Button 1</button> 
    </div> 
    <div class="col-xs-4 text-center"> 
    <button>Button 2</button> 
    </div> 
    <div class="col-xs-4 text-right"> 
    <button>Button 3</button> 
    </div> 
</div> 

但我尋找那個看起來像這樣（但是，目前不工作）的解決方案：https://jsfiddle.net/pvw1qL5v/2/

<div class="col-xs-12"> 
    <button>Button 1</button> 
    <button style="text-align: center;">Button 2</button> 
    <button class="pull-right">Button 3</button> 
</div> 

Answer 1

使用display: flex和justify-content: space-between。

.col-xs-12 { 
 
    display: flex; 
 
    justify-content: space-between; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12"> 
 
     <button>Button 1</button> 
 
     <button>Button 2</button> 
 
     <button>Button 3</button> 
 
    </div> 
 
    </div> 
 
</div>

JSfiddle