経緯
スクールではliやdivを横並びにするときにfloatで習ったけど、これが初心者にはバグる原因になりました。
特にfloatの次の要素がその上にかぶってきたりすることでほんとに時間がかかった。
どうやらflexを使えばきれいに配置できるし、画面サイズが変わっても折り返してくれるので、レスポンシブ？
DEMO
See the Pen ヘッダーリンクの横並び by 大野原 信 (@rjwxfqli) on CodePen.
左の画面のHTMLなどのボタンをポチポチして表示・非表示を切り替えるとRESULTの幅が変わるので、挙動がわかると思います。
説明
親要素： フレックスコンテナ → display: flex;
子要素： フレックスアイテム → 自動的にフレックスアイテムになる
親要素の中に2つ子要素があったら、その2つが横並びになる。
nav 親
div 子 → これが横並びに
divの中にulがあり、その中にliがあるとき、
ul 親 → display: flex;とすることで liがフレックスアイテム、つまり横並びになる。
入れ子の構造になる。
navの中に、
左に配置したいもの、と右に配置したいものがあるとすると、まずはその二つのdivが必要になる。
そしてその二つのdivの配置を指定する、justify-content: space-between;を書く。
これで、間に適切なスペースをとって、要素が左から右まで配置されるようになる。
このままではul liも、リストスタイルで右に配置されるだけ。
ulの中で同じことをしてあげれば、リストもきれいに横並びで配置される。
Tips
画面サイズが小さくなると、縦にずれるようにするには、フレックスコンテナ（親）に
flex-wrap: wrap;
を書く。
また、liの幅が文字列の幅になっているので、縦にずれるようにした場合、見た目がジグザグになってしまう。
よって、liの幅を指定してあげれば、縦にずれて折り返しになるときも、ある程度見た目がきれい！
