初心者のためのHTMLとCSSで横並びを実現する1番簡単な方法

HTMLとCSSで横並びを実現する方法はいくつかあります。

これまでは対応するブラウザや横並びのレイアウトによって方法を変えてきましたが、横並びを実現するための1つの方法としてdisplay: flex;が実用レベルになりました。

dispaly: flex;を使うのが横並びを手っ取り早く簡単に実現するのに一番おすすめな方法です。

この記事ではdisplay: flex;で横並びを実現する方法を紹介します。

HTMLとCSSで横並びを実現

さっそくdisplay: flex;を使った横並びで、一番シンプルな例です。

横並びにしたい要素を囲った要素にdisplay: flex;を指定します。

この場合は下記です。

• 横並びにしたい要素：li
• 囲った要素：ul

ulには「.items」というクラスがついておりdisplay: flex;が指定されています。

横並びの水平位置を揃える

横並びにした時それぞれ高さが違う場合は、上揃え・中央揃え・下揃えのように位置を調整したくなるかと思います。

display: flex;を使うと水平位置の調整も簡単にできます。

上揃え

上揃えにするには、先に紹介したコードで自然と上揃えになりますが、指定する場合はalign-items: flex-start;を指定します。

中央揃え

中央揃えは横並びのレイアウトを実現するために他の方法では、苦労も多いですがdisplay: flex;を使うと簡単に実現できます。

align-items: center;を指定することで、横並びにする要素の中で一番高いものに合わせてすべてが中央の位置になります。

下揃え

下揃えはalign-items: flex-end;を指定します。

横並びの開始位置を揃える

display: flex;は水平位置だけでなく、どこから横並びを開始するかも選択できます。

CSSを1行書き足すだけで簡単に実現できるので、順番にその方法を紹介します。

左揃え

左揃えは指定しなくても自然と実現されますが、指定を加える場合はjustify-content: flex-start;を指定します。

右揃え

右揃えはjustify-content: flex-end;を指定します。

中央揃え

中央揃えはjustify-content: center;を指定します。

均等揃え

均等揃えはjustify-content: space-between;を指定します。

ヘッダーのレイアウトを作る時に、左寄せでロゴ、右寄せでナビゲーションというようなよくあるレイアウトを実現する時に重宝します。

横並びで折り返しする

display: flex;で横並びを実現した場合、標準では折返しがされず、横並びの要素が縮小されてしまいます。

まず標準だとどうなるかは下記です。

そこで合わせてflex-wrap: wrap;を指定するようにします。

flex-wrap: wrap;を指定されたことで入り切らない横並びの要素が折り返されました。

display: flexの対応ブラウザ

冒頭でHTML・CSSの横並びにはいくつか方法があると書きました。

その理由はdisplay: flex;の対応ブラウザでした。

現在は全ブラウザの最新版に対応しており、実用レベルとなりました。

display: flex;の対応ブラウザを詳しく確認したい場合は下記のリンクをご覧ください。

Can I use... Support tables for HTML5, CSS3, etc

横並びにはdisplay: flexを使おう

紹介してきたようにdisplay: flex;は救世主とも言えるほど、横並びを簡単に実現できます。

これからHTMLとCSSで横並びをやりたい人は、display: flex;から覚えるのがよいですね。

display: flex;は他にもできることが多く慣れてきたら、少しずつ知識を増やしていくのがおすすめです。