Flexでの左寄せ、中央寄せ、右寄せの方法

display:flex;で囲って、
左寄せはmarin-right:auto;
右寄せはmargin-left:auto;
中央寄せは
margin-right:auto;margin-left:auto;
margin:0 auto;
margin:auto;
のどれか。

<div style="display:flex;">
<div style="margin-right:auto;">左寄せ</div>
<div style="margin-left:auto;margin-right:auto;">中央寄せ</div>
<div style="margin-left:auto;">右寄せ</div>
</div>

実行結果

ロゴだけ左寄せにしてそれ以外のメニューはすべて右寄せにすることもできる。

<ul style="display:flex;">
        <!-- css側でli:first-child{ margin-right:auto; }と書いても良い -->
	<li style="margin-right:auto;">ロゴ</li>
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
	<li>リスト4</li>
	<li>リスト5</li>
</ul>

実行結果

これでヘッダー部分のメニューなんかもラクに作れますね。

参考リンク
ブロック要素を左寄せ・中央寄せ・右寄せする方法 - CSSテクニック - acky.info
CSSのflexプロパティで右寄せ、左寄せ、中央寄せにする方法 - FEVDES BLOGFEVDES BLOG
Flexboxレイアウトまとめ - Qiita