CSS Flexbox超入門！要素を思い通りに並べる方法をかんたん解説

Webサイトのレイアウト作成で、要素の配置のコーディングはとても重要です。特にアイテムの横並びや中央寄せ、高さの均一化は、従来のCSSでは複雑な記述が求められる場面がありました。

今回は、CSS Flexboxの基本から具体的な使い方、さらには初心者が陥りやすいポイントまで、網羅的に解説します。この記事を読み終えるころには、Flexboxを使ったレイアウトの基礎がわかり、効率的なコーディングができるようになるでしょう。

WordPressテーマ「PANDORA」

レイアウト自由自在なブログ・メディアを構築する。

デモサイト

ダウンロード

CSSのFlexboxとは？

Flexbox（フレックスボックス）とは、CSS3で導入された要素を柔軟に配置・整列・サイズ調整するためのレイアウトモデルです。従来のfloatやpositionによるレイアウトの複雑さを解消し、コンテナ内のアイテムを直感的かつ効率的に扱えるようになります。

Webレイアウトにおいてとても便利なFlexbox。まずはFlexboxで何ができて、どれくらい使えるのか、概要を掴んでいきましょう。

Flexboxでできること

Flexboxを利用すると、主に以下のレイアウトが簡単に実装できます。

• アイテムを横一列または縦一列に並べる
• 並べたアイテムをコンテナの中央・端・均等に配置する
• アイテムの高さを揃える
• 表示順序をHTMLの構造と独立して変更する

これまではフロートやpositionプロパティなどを駆使していた複雑なレイアウトも、Flexboxなら少ない記述で、かつ柔軟に対応できます。

最低限覚えたい2つのプロパティ

Flexboxを使い始めるにあたり、まず覚えておきたいのは親要素に指定するdisplay: flex;です。
display: flex;を指定することで、要素（フレックスコンテナ）の子要素（フレックスアイテム）がFlexboxのレイアウトに従うようになります。
アイテムの並び方を制御するために、以下の2つのプロパティを最初に把握しておくと便利です。

Flexboxには他にも多くのプロパティがありますが、まずはdisplay: flex;と上記2つのプロパティから使い方に慣れていくのがおすすめです。

主要ブラウザ対応状況

Flexboxの主要ブラウザ対応状況は、非常に良好です。

• Google Chrome
• Mozilla Firefox
• Apple Safari
• Microsoft Edge

上記のモダンブラウザはもちろん、これらのモバイル版ブラウザにおいても、基本的な機能はほぼ問題なく動作します。

Internet Explorerの一部の古いバージョンでは対応していないか、ベンダープレフィックスが必要なケースがありました。現在ではIEのサポートも終了しており、実務で意識する場面はほとんどないため、安心してFlexboxを使用できます。

Flexboxの基本コード3パターン

ここでは、特によく使われる3つのレイアウトを具体的なコードとともに紹介します。

1. 横並びレイアウト

アイテムを横並びにするには、flex-directionとjustify-contentを使用します。

flex-directionは、アイテムを並べる方向を指定するプロパティです。デフォルトが横並びのため、単純な横並びであれば明示的に指定する必要はありません。

justify-contentは、横並びにしたアイテム間のスペースや配置を指定するプロパティです。たとえば、上図のように3つのアイテムを左詰めで横に並べたい場合は、以下のように記述します。

<div class="flex-container">
	<div class="flex-item">アイテム1</div>
	<div class="flex-item">アイテム2</div>
	<div class="flex-item">アイテム3</div>
</div>

.flex-container {
   display: flex;
   padding: 20px;
}

.flex-item {
   background-color: #608FC3;
   padding: 20px;
   margin: 5px;
   color: #fff;
   text-align: center;
}

flex-containerクラスにdisplay: flex;を指定するだけで、子要素であるflex-itemクラスが横に並びます。justify-contentのデフォルト値はflex-startなので、フレックスアイテムはコンテナの左端から順番に配置されます。

2. 上下左右ど真ん中に配置

アイテムをコンテナの上下左右、完全に中央に配置するレイアウトも、Flexboxを使うとシンプルです。
justify-contentプロパティとalign-itemsプロパティの組み合わせで実装できます。
たとえば、上図のようなレイアウトは以下のように記述します。

<div class="center-container">
	<div class="center-item">中央のアイテム</div>
</div>

.center-container {
   display: flex;
   justify-content: center;/* 水平方向の中央揃え */
   align-items: center;/* 垂直方向の中央揃え */
   height: 200px;
   border: 1px solid #333;
   padding: 10px;
   width: 400px;
}

.center-item {
   background-color: #5cb85c;
   padding: 30px;
   color: #fff;
   text-align: center;
}

align-items: center;で垂直方向の中央揃えを機能させるためには、親要素に高さの指定が必要なため、center-containerクラスに200pxを設定しています。

3. 高さを揃えたカード

複数のカード型アイテムを並べるとき、内容量が異なると高さがバラバラになりがちですが、
align-items: stretch;を指定すると、簡単にアイテムの高さを揃えられます。

たとえば、上図のようなレイアウトは以下のように記述します。

<div class="cards-container">
	<div class="card">
		<h4>カード1</h4>
		<p>これはカード1の内容です。</p>
	</div>
	<div class="card">
		<h4>カード2</h4>
		<p>これはカード2の内容です。こちらのカードは少し文章が長めになっています。</p>
	</div>
	<div class="card">
		<h4>カード3</h4>
		<p>カード3です。短い説明文。</p>
	</div>
</div>

.cards-container {
display: flex;
gap: 16px;
padding: 16px;
justify-content: center;
flex-wrap: wrap;
}

.card {
width: 220px;
max-width: 100%;
background-color: #337ab7;
padding: 20px;
color: #fff;
border: 1px solid #2e6da4;
border-radius: 8px;
box-sizing: border-box;
}

.card h4 {
margin-top: 0;
}

flex-wrap: wrap; を指定すると、画面が狭くなったときにはカードが自動的に下の段に並び、2段や3段といった配置が可能です。

また、gap: 16px; によってカード同士の間に均等なすき間ができ、きれいなレイアウトになります。justify-content: center; の指定があることで、カード全体の並びが画面の中央に寄せて表示されます。

Flexboxの親要素スタイル

Flexboxのレイアウトは、親要素にdisplay: flex;またはdisplay: inline-flex;を指定してコーディングします。

親要素に適用するプロパティを理解することで、子要素の基本的な配置をコントロールできます。

アイテムの並び方向を決める

アイテムの並び方向を決めるには、flex-directionプロパティを使用します。flex-directionプロパティには以下の値を指定できます。

これらの値を使いこなすことで、アイテムの基本的な並び順を簡単に変更できます。

折り返し行を作る

折り返し行を作るには、flex-wrapプロパティを使用します。フレックスコンテナの幅や高さにアイテムが収まりきらないときに指定します。

flex-wrapプロパティの値は以下のとおりです。

デフォルトのアイテムは横一列に並ぼうとし、要素の幅を超える場合は縮小されるか、はみ出して表示されます。

flex-wrap: wrap; を指定すると、レスポンシブデザインなどでアイテムを自然に折り返したい場合に非常に便利です。

横方向に並べる

横方向に並べるアイテムの配置を調整するには、justify-contentプロパティを使用します。
justify-contentプロパティでよく使用される値は、以下のとおりです。

justify-content は、横並びにしたアイテムの配置（左/右/中央揃え）や、アイテム間のスペース配分を調整します。

アイテムを両端に寄せたり、均等な間隔で並べたりといったレイアウトが可能です。

縦方向に並べる

アイテムを縦方向に並べたり、横並びのアイテムの行内での垂直方向に揃えるときはalign-itemsプロパティを使用します。
align-itemsプロパティでよく使用される値は、以下のとおりです。

align-items は、フレックスアイテムの垂直方向における配置方法を定義するプロパティです。

デフォルトのstretchではアイテムが親要素の高さまで引き伸ばされ、flex-start・center・flex-end はそれぞれ上端・中央・下端にアイテムを配置します。

複数行をまとめて調整する

複数行をまとめて調整するには、align-contentプロパティを使用します。
flex-wrap: wrap; などによってアイテムが複数行になったときに、行全体のコンテナ内での配置方法を定義します。アイテムが一行しかない場合は効果がありません。
align-contentプロパティでよく使用される値は、以下のとおりです。

複数行の配置では flex-start で上詰めにするか、center で中央に寄せるか、あるいは space-between で行間を均等に空ける、といった使い方が一般的です。

Flexboxの子要素スタイル

Flexboxでは、親要素だけでなく、子要素にも専用のプロパティを指定することで、個々のアイテムの動きを細かく指定できます。

表示順を自由に変える

表示順を自由に変えるには、orderプロパティを使用します。
orderプロパティは、HTMLソースコード上の順序とは関係なく、フレックスアイテムの表示順序を数値で指定可能です。
デフォルト値は0で、数値が小さいほど手前に表示されます。
たとえば、ABCDを以下のように並び変えてみましょう。

1. D
2. B
3. A
4. C

<div class="flex-container order-example">
 <div class="item-a">A</div>
 <div class="item-b">B</div>
 <div class="item-c">C</div>
 <div class="item-d">D</div>
</div>

.order-example {
 display: flex;
}
.order-example div {
 padding: 15px;
 margin: 5px;
 background-color: #f0ad4e;
 color: white;
}

.item-a { order: 2; }
.item-b { order: 1; }
.item-c { order: 3; }

同じorder値を持つアイテムが複数ある場合は、HTMLソースコード上の順序に従います。
また、マイナスの値を指定することも可能です。

伸縮と基準サイズ

フレックスアイテムの伸縮性と基準サイズは、flex-basis、flex-grow、flex-shrinkの3つを使用します。

一つずつ動きを変えてみることで、どんな効果なのか直感的にわかります。もし実際に動きを見たい場合は、コードをコピペしてブラウザで試してみてください。

特定アイテムの位置変更

特定のアイテムだけ位置を変えるには、align-selfプロパティを使用します。
align-selfプロパティは、親要素のalign-itemsで指定された全体の揃え方を上書きし、個別のフレックスアイテムの垂直方向のレイアウトを指定します。
align-selfプロパティは、align-itemsと同じ値です。

たとえば上図のように3つのカードのうち、真ん中だけ下に揃えるときは以下のように記述します。

<div class="flex-container">
 <div class="item">A</div>
 <div class="item special">B</div>
 <div class="item">C</div>
</div>

.flex-container {
 display: flex;
 align-items: flex-start;
 height: 160px;
 border: 2px solid #333;
}

.item {
 width: 50px;
 background: #608FC3;
 color: #fff;
 margin: 8px;
 text-align: center;
 padding: 16px 0;
 border-radius: 1px;
}

.special {
 align-self: flex-end;
 background: #ff9800;
}

例では親要素で align-items: flex-start; を使って、全体のカードを上揃えにしています。真ん中のBだけspecialクラスでalign-self: flex-end; を指定し、Bだけが下揃えにしています。

このようにalign-selfを使うと、親で決めた揃え方を「そのアイテムだけ特別に変える」ことが可能です。

CSSのFlexboxで初心者がハマりやすい落とし穴

Flexboxは非常に便利なレイアウト手法ですが、いくつかの点で初心者がつまずきやすいポイントがあります。

ここでは代表的な落とし穴とその対処法を紹介します。これらの落とし穴を事前に把握しておくことで、Flexboxを使ったレイアウト構築がよりスムーズに進むでしょう。

横並びにならない

Flexboxを使ってアイテムを横並びにしようとしても、意図した通りにならない場合があります。
主な原因と解決策は以下のとおりです。

横並びにならないデバッグのコツは、ブラウザの開発者ツールで親要素にdisplay: flex;が適用されているか、また子要素のサイズや配置を確認することです。

上記の3つを確認することで、問題を素早く特定できます。

中央寄せできない

アイテムをコンテナの中央に配置しようとしてもうまくいかないケースもよくあります。
中央寄せできないときの主な原因と解決策は以下のとおりです。

Flexboxの中央寄せができない原因は、水平方向と垂直方向に正しいプロパティを指定できていないか、垂直中央寄せにおいて親要素に具体的な高さが設定されていないためです。

水平はjustify-content: center、垂直はalign-items: centerを使用し、垂直中央寄せには親要素にheightまたはmin-heightを指定することを覚えておきましょう。

高さが揃わない

Flexboxのalign-items: stretch;（デフォルト値）により、通常はフレックスアイテムの高さは自動的に揃いますが、揃わないケースもあります。
高さが揃わない主な原因と解決策は以下のとおりです。

Flexboxで高さが揃わない主な原因は、アイテムに個別のheight指定がされているか、親要素のalign-itemsがstretch以外に設定されているケースがほとんどです。

複雑なレイアウトでは内部要素の影響も考えられます。開発者ツールで実際の高さを確認しながら、アイテムに個別に設定された高さを削除し、Flexboxのデフォルトの伸縮機能に高さの調整を任せましょう。

CSSのFlexboxと他レイアウトとの使い分け

CSSにはFlexboxの他にも、Gridやpositionプロパティなど、さまざまなレイアウト手法があります。それぞれの特徴を理解し、適切に使い分けることで、パフォーマンスが良くて安定したWebサイトを構築できます。

以下にFlexbox、Gridとpositionプロパティを組み合わせる場合の主な違いと使い分けのポイントを表でまとめました。


Flexboxは「アイテムをどのように並べ、スペースをどう分配するか」を得意とするレイアウトです。
Gridは「要素をどこに配置するか」という点に優れています。
また、positionはFlexboxやGridと組み合わせて使用できるため、それぞれの特性を理解し、場面に応じて最適な手法を選びましょう。

まとめ

Flexboxを使いこなせるようになると、これまで複雑だったレイアウト調整が驚くほど簡単かつ直感的に実装できます。特にレスポンシブデザインにおいては、その柔軟性が大きな力を発揮します。

この記事で紹介した内容を土台として、実際に手を動かしながらさまざまなプロパティを試してみてください。

WordPressテーマ「PANDORA」

レイアウト自由自在なブログ・メディアを構築。

デモサイト

ダウンロード

WordPressテーマ「NULL」

技術や知見をシェアする開発者ブログを構築。

デモサイト

ダウンロード

WordPressテーマ「Muum」

デザイン・SEOともに最高峰のブログに。

デモサイト

ダウンロード

WordPressテーマ「Cherie」

華やかなブログで集客できるテンプレート。

デモサイト

ダウンロード