HTML・CSSでコーディングする際に、高確率で出てくる要素の横並び。
横並びはいくつかの方法があるので、有名な３パターンをご紹介します！
float: left;
多くのWEB・プログラミングスクールで最初の方に紹介されるfloat。
floatは浮かすという意味で要素を浮かすことで、空いたスペースを詰める動きで横並びを作っています。
See the Pen Untitled by ALcuesto (@ALcuesto) on CodePen.
floatにはfloat:rightもあり、今回は２つともにいれましたが、どちらか１つだけ（横並びしたい要素）にだけfloatを入れることも可能。
ただfloatは浮かすので、その下に他の要素を入れていくと、marginやpaddingで距離を調整しないと上手くいかなかったりとするので、あまり使用頻度は高くないと思います。
display: inline-block;
ヘッダー、フッターなどのメニューやリストの横並びで多く使用されているのが、display: inline-block;
元々要素にはblock要素とinline要素があり、inline要素はディフォルトで横並びになる性質があります。
※ inline要素の主なものは、【aタグ】【imgタグ】【spanタグ】など
ただ、inline要素だとwidthなどの指定ができなかなったり。。。
それを解消するのがdisplay: inline-block;
display: inline-block;はinline要素の性質を保ちながらblock要素にしてね！ということなので、横並びにもなるし幅などの指定も可能
See the Pen Untitled by ALcuesto (@ALcuesto) on CodePen.
display: flex;
最もおススメなのがdisplay: flex; これはdisplay: flex;で指示された要素の中身を横並びにする指示です。
※display:inline-blockなどと指示する位置が違うので注意！
See the Pen Untitled by ALcuesto (@ALcuesto) on CodePen.
display: flex;で横並びにした要素を上下中央にする場合は、 align-items: center;を記載することでOKです。
See the Pen align-items: center;の説明 by ALcuesto (@ALcuesto) on CodePen.
いかがでしょうか。
このように、横並びをするには複数のパターンがあるので、指示する位置や表現したいデザインに応じてCSSを選んでくださいね！
ちなみに私は、ほぼdisplay: flex;で対応して、メニューだけdisplay: inline-blockでやっています！
