今回は、WebレイアウトにおけるCSSで要素を横並びにする方法をご紹介していきます。

Webレイアウトで要素を横並びにする手法は、主に「Float」と「FrexBox」の2種類あります。
これまでは、「Float」を利用してレイアウトしていましたが、コードが複雑になりがちで、レイアウトが崩れる可能性が高いデメリットがありました。
そのような問題を解決させるために「FrexBox」でのレイアウト手法が登場し、今では主流になってきています。

〇Floatレイアウト
Floatレイアウトの特徴として、要素を左詰めで配置していき、いっぱいになると次の行におりるという性質があります。
Floatを使用して横並びにさせるには、BoxAに「float: left;」、BoxBに「float: right;」を記述して適用します。記述を忘れた場合は、横並びにはならず、段落がずれたりします。
また、Floatを使用する場合は「overflow; hidden;」や「clear: both;」などを記述して、デザインが崩れる原因となる親要素が子要素の高さが把握できないなどの回り込みを解除する必要があります。
使用用途として、各要素の幅がバラバラとなっている場合に有効となります。

〇FrexBoxレイアウト
FrexBoxレイアウトの特徴として、横並びをさせる点では同じですが、様々な設定をすることができ、自由な配置が可能となります。
FrexBoxを使用して横並びにさせるには、親要素に「display: flex;」を記述するだけで子要素が横並びになります。水平方向の調整には、「justify-content」プロパティを使用します。
使用用途として、横並びを均等に配置したい場合や各要素の高さがバラバラとなっている場合に有効となります。


以上、Webレイアウトにおける要素の横並びについてでした。
参考にしていただけると幸いです。


■参考資料
https://www.w2solution.co.jp/tech/2020/09/29/%e3%81%a9%e3%81%a3%e3%81%a1%e3%82%92%e4%bd%bf%e3%81%86%ef%bc%9fcss%e3%81%a7%e6%a8%aa%e4%b8%a6%e3%81%b3%e3%81%ae%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%ef%bc%88float-or-flex%ef%bc%89/#1