ウェブサイトのコーディングをしていて、要素を横並びにしたいことってかなり多いと思います。

今回は、CSSで横並びにする方法を4通り紹介していきます。

floatを使う

勉強してて一番はじめに習うであろうおなじみのやり方ですね。

floatは文字通り要素をフロート（浮かせる）ため、floatさせた親の要素の高さがなくなってしまいます。

そのため、floatを解除をするために直後の要素にclearというプロパティをつける必要があります。

floatさせた親要素に直接高さを指定する方法でも対処は可能ですが、実際のサイトは高さが可変の場合がほとんどなので推奨しません。

See the Pen CSSで横並び float by tnyk35 (@tnyk35) on CodePen.0

display:inline-blockを使う

一昔前まで（IE7以下が使われてた頃）は使えなかったdisplayプロパティのひとつですが、IE8が主流になってからは使われるようになりました。

インライン要素は、縦横指定しても反映されないし、ブロック要素だと改行されちゃうしでそんなときに役に立つすげぇやつです。

高さが違う要素も上揃え、中央揃え、下揃えもできてしまうのは素晴らしいですよね。

ただそのままdisplay: inline-block;と指定するだけだと隙間ができてしまうというのが唯一の難点。

それを解消する方法もいくつかあるのですが、手っ取り早いのは、inline-blockを指定した”親”要素にfont-size: 0;をつけ、inline-blockを指定した要素でfont-sizeを指定するものです。

See the Pen CSSで横並び inline-block by tnyk35 (@tnyk35) on CodePen.0

display:table-cellを使う

表（tableタグ、tr,td,thタグ）を使うのと同じ動きになります。

必ず横並びなります。むしろ横並びにしかなりません。

そして、表のセルの中身って縦横中央揃えも簡単にできると思いますが、それも可能です。指定方法も表と一緒です。

デメリットは、レスポンシブで画面幅を縮めた場合に２段、３段にしたいというのができないため、使うケースは限られてくるかと思います。

See the Pen CSSで横並び table-cell by tnyk35 (@tnyk35) on CodePen.0

display:flexを使う

IE11が主流となってる現在、こちらで対応するのがベストです。

inline-blockのように、上揃え、中央揃え、下揃えができるし、
table-cellのように、横並びにしかならないようにもできるし、縦横中央揃えにだってできる。

See the Pen CSSで横並び flex by tnyk35 (@tnyk35) on CodePen.0

やれることが多い分プロパティが結構あって大変なのですが、結局よく使うプロパティは限られてきます。

/* 横の指定 */
justify-content: flex-end; /* 右揃え */
justify-content: center; /* 中央揃え */
justify-content: space-between; /* 両端を基準に均等配置 */

/* 縦の指定 */
align-items: flex-end; /* 下揃え */
align-items: center; /* 中央揃え */

/* ２段、３段にしたい場合 */
flex-wrap: wrap;

これだけ覚えておけばほぼ事足りるかと思います。

display:flexをさらに詳しく知りたい場合は、

flexboxでよく使うプロパティを整理した

こちらの記事を読んでください。

特に理由がない限りはこちらを使うようにしましょう！

まとめ：特別な理由がない限りはdisplay:flexを使おう

どのブラウザでも崩れないものであれば上記４つどれを使ってもいいかなとは思いますが、実際にdisplay:flexを使ってると今までなんでなかったのだろうというくらい使い勝手がいいです。

色々できること、やれることが多くて結構触らずにいる人も多いと思いますが、本当に便利なので皆さん是非一度使ってみてはいかがでしょうか。