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

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

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

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

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

HTMLとCSSで横並びを実現

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

See the Pen mKOPvx by Koji (@koojy) on CodePen.

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

この場合は下記です。

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

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

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

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

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

上揃え

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

See the Pen GGNZVG by Koji (@koojy) on CodePen.

中央揃え

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

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

See the Pen eKBzmJ by Koji (@koojy) on CodePen.

下揃え

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

See the Pen KeNMdK by Koji (@koojy) on CodePen.

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

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

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

左揃え

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

See the Pen gKLMxq by Koji (@koojy) on CodePen.

右揃え

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

See the Pen gKLMXE by Koji (@koojy) on CodePen.

中央揃え

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

See the Pen NzbrXW by Koji (@koojy) on CodePen.

均等揃え

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

See the Pen XYNKVR by Koji (@koojy) on CodePen.

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

横並びで折り返しする

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

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

See the Pen xzROEr by Koji (@koojy) on CodePen.

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

See the Pen MXbebK by Koji (@koojy) on CodePen.

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;は他にもできることが多く慣れてきたら、少しずつ知識を増やしていくのがおすすめです。

この記事を書いた人

コウジ

TypeScriptとVue.jsが好きなフリーランスのフロントエンドエンジニアです。
フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。

Web開発の仕事依頼

フリーランスのエンジニアとしてWeb開発の仕事をお引き受けしています。

依頼の検討をしていただきます際はポートフォリオサイトの事業・実績ページをご覧いただき、お問い合わせよりメールや各種SNSよりご連絡ください。

仕事の相談をする
基礎から学ぶ Vue.js