flexboxを使って、1行に要素を左揃えに整列します。

Question

昔は2つのコンテナを使用していて、残りの1つはclearfixを使用してフローティングしていました。しかし、私はその方法がちょっと古くなっていて、フレックス機能がうまくサポートされていると思います。

問題フレックスを使用してレイアウトする方法がわかりません。

ここにはいくつかのボタンがあるスクリーンショットがあります。セカンダリアクションは左に整列され、他の2つのプライマリアクションは右揃えになります。ここで

私が持っているマークアップです：

<footer> 
    <button>Back</button> 
    <span class="primary-btns"> 
     <button>Cancel</button> 
     <button>Go</button> 
    </span> 
</footer> 

は、誰かが私がここで使うべきフレックス何CSS方法を教えてもらえますか？

Answer 1

あなただけjustify-content: space-between

footer { 
 
    display: flex; 
 
    justify-content: space-between; 
 
}

<footer> 
 
    <button>Back</button> 
 
    <span class="primary-btns"> 
 
    <button>Cancel</button> 
 
    <button>Go</button> 
 
    </span> 
 
</footer>

アップデートを使用することができます：あなたはまた、margin-left: autoDEMO

Answer 2

でspanせずにこれを行うことができますが、この場合であっても、ネストされたコンテナを必要としません。

最新のCSSテクノロジ（フレックスとグリッド）はこのレイアウトを単純化し、1つのコンテナしか必要としません。

footer { 
 
    display: flex; 
 
} 
 

 
button:first-child { 
 
    margin-right: auto; 
 
} 
 

 
button { 
 
    margin: 5px; 
 
}

<footer> 
 
    <button>Back</button> 
 
    <button>Cancel</button> 
 
    <button>Go</button> 
 
</footer>

Flexの自動マージンは、指定した方向にすべての空き容量を消費します。

また、これは動作します：

button:nth-child(2) { margin-left: auto } 

ここでは自動マージンについてのすべて：Methods for Aligning Flex Items