同じ行と同じコンテナ内の中央揃え要素

Question

要素を別々のコンテナに分割することなく、同じ行に要素を左揃え、中央揃え、右揃えする方法はありますか。要素を右揃えにするには、要素上に直接pull-rightを使用して要素を浮動させることができます。しかし、私は要素を中心に問題があります。私はブートストラップを使用していますが、純粋な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