MENU
無料Webアプリ、Webコーディング事例集、PC・IT用語Wiki、EC-CUBEカスタマイズなど
  1. ホーム
  2. プログラミング
  3. HTML/CSS/JavaScript
  4. CSS Flexbox 完全解説｜Flexbox Interactive Guide

CSS Flexbox 完全解説｜Flexbox Interactive Guide

HTML/CSS/JavaScript

デモで学ぶ Flexbox 全プロパティ

各プロパティの動作をボタン操作で確認しながら、すぐに使えるHTML・CSSのコードをコピーできます。
HTML・CSS・JSコードプレビューツール にて実装確認ができます。

関連: Flexboxとは？ レスポンシブデザインとは？ メディアクエリとは？

やりたいことから探す

① display: flex — ブロック要素を横に並べる

1
2
3
4

現在: display: block（初期値）

HTML
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>
CSS
.container {
  display: block;
  background: #0f0f1a;
  padding: 14px;
  border-radius: 10px;
}

.box {
  width: 90px;
  height: 72px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  margin-bottom: 8px;
}

.box:nth-child(1) { background: linear-gradient(135deg, #06b6d4, #0284c7); }
.box:nth-child(2) { background: linear-gradient(135deg, #ec4899, #be185d); }
.box:nth-child(3) { background: linear-gradient(135deg, #22c55e, #15803d); }
.box:nth-child(4) { background: linear-gradient(135deg, #f97316, #c2410c); }
display: flex

親要素に設定するだけで、子要素が横並びになります。「親要素に設定する」のがポイントで、子要素に設定しても効きません。

display: flex にすると子要素の幅が変わる

button や label などのインライン要素は、親に flex を設定すると親幅いっぱいに広がることがあります。各子要素に width と height を明示的に指定して対処しましょう。

② justify-content — 横方向の揃え方

1
2
3
4

justify-content: flex-start

HTML
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>
CSS
.container {
  display: flex;
  justify-content: flex-start;
  background: #0f0f1a;
  padding: 14px;
  border-radius: 10px;
}

.box {
  width: 20%;
  height: 72px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.box:nth-child(1) { background: linear-gradient(135deg, #06b6d4, #0284c7); }
.box:nth-child(2) { background: linear-gradient(135deg, #ec4899, #be185d); }
.box:nth-child(3) { background: linear-gradient(135deg, #22c55e, #15803d); }
.box:nth-child(4) { background: linear-gradient(135deg, #f97316, #c2410c); }
justify-content — 主軸（横）方向の揃え方

flex-start（左揃え）・center（中央）・flex-end（右揃え）・space-between（等間隔）・space-around（均等余白）の5種類が基本です。親要素のCSSに指定します。

③ align-items — 縦方向の揃え方

1
2
3
4

align-items: flex-start

HTML
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>
CSS
.container {
  display: flex;
  align-items: flex-start;
  height: 180px;
  background: #0f0f1a;
  padding: 14px;
  border-radius: 10px;
}

.box {
  width: 20%;
  height: 72px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.box:nth-child(1) { background: linear-gradient(135deg, #06b6d4, #0284c7); }
.box:nth-child(2) { background: linear-gradient(135deg, #ec4899, #be185d); }
.box:nth-child(3) { background: linear-gradient(135deg, #22c55e, #15803d); }
.box:nth-child(4) { background: linear-gradient(135deg, #f97316, #c2410c); }
align-items — 交差軸（縦）方向の揃え方

flex-start（上端）・center（中央）・flex-end（下端）が基本です。効果を確認するには、親要素に height を指定しておく必要があります。親要素のCSSに指定します。

④ align-self — 子要素ごとに縦位置を個別指定

1
flex-start
2
center
3
flex-end
4
center
HTML
<div class="container">
  <div class="box box-1">1</div>
  <div class="box box-2">2</div>
  <div class="box box-3">3</div>
  <div class="box box-4">4</div>
</div>
CSS
.container {
  display: flex;
  height: 180px;
  background: #0f0f1a;
  padding: 14px;
  border-radius: 10px;
}

.box {
  width: 22%;
  height: 72px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.box-1 { background: linear-gradient(135deg, #06b6d4, #0284c7); align-self: flex-start; }
.box-2 { background: linear-gradient(135deg, #ec4899, #be185d); align-self: center; }
.box-3 { background: linear-gradient(135deg, #22c55e, #15803d); align-self: flex-end; }
.box-4 { background: linear-gradient(135deg, #f97316, #c2410c); align-self: center; }
align-self — 子要素ごとに縦位置を上書き

align-items と同じ値を使いますが、子要素のCSSに設定します。親の align-items を無視して、各ボックスを個別の縦位置に配置できます。

⑤ order — 表示順の変更

A
B
C
D

order: A=0 / B=0 / C=0 / D=0（初期値）

HTML
<div class="container">
  <div class="box box-a">A</div>
  <div class="box box-b">B</div>
  <div class="box box-c">C</div>
  <div class="box box-d">D</div>
</div>
CSS
.container {
  display: flex;
  background: #0f0f1a;
  padding: 14px;
  border-radius: 10px;
}

.box {
  width: 22%;
  height: 72px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.box-a { background: linear-gradient(135deg, #06b6d4, #0284c7); order: 0; }
.box-b { background: linear-gradient(135deg, #ec4899, #be185d); order: 0; }
.box-c { background: linear-gradient(135deg, #22c55e, #15803d); order: 0; }
.box-d { background: linear-gradient(135deg, #f97316, #c2410c); order: 0; }
order — 表示順の変更

HTML の記述順に関係なく、数値の小さい順に並び替えられます。初期値は 0 です。子要素のCSSに設定します。

⑥ flex-direction: column — 縦並びに切り替える

1
2
3
4

flex-direction: column

HTML
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>
CSS
.container {
  display: flex;
  flex-direction: column;
  background: #0f0f1a;
  padding: 14px;
  border-radius: 10px;
}

.box {
  width: 140px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  margin-bottom: 6px;
}

.box:nth-child(1) { background: linear-gradient(135deg, #06b6d4, #0284c7); }
.box:nth-child(2) { background: linear-gradient(135deg, #ec4899, #be185d); }
.box:nth-child(3) { background: linear-gradient(135deg, #22c55e, #15803d); }
.box:nth-child(4) { background: linear-gradient(135deg, #f97316, #c2410c); }
flex-direction: column — 縦方向に並べる

column を指定すると子要素が縦並びになります。このとき justify-content が縦方向・align-items が横方向に働くよう軸が入れ替わる点に注意してください。

⑦ flex-wrap — はみ出した要素を折り返す

1
2
3
4
5
6
7
8

flex-wrap: nowrap

HTML
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
</div>
CSS
.container {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  background: #0f0f1a;
  padding: 14px;
  border-radius: 10px;
}

.box {
  width: 22%;
  min-width: 22%;
  height: 72px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.box:nth-child(4n+1) { background: linear-gradient(135deg, #06b6d4, #0284c7); }
.box:nth-child(4n+2) { background: linear-gradient(135deg, #ec4899, #be185d); }
.box:nth-child(4n+3) { background: linear-gradient(135deg, #22c55e, #15803d); }
.box:nth-child(4n+4) { background: linear-gradient(135deg, #f97316, #c2410c); }
flex-wrap — はみ出した要素を折り返す

初期値は nowrap で、子要素は何行になろうと1行に詰め込まれます。wrap に設定すると、収まりきらない要素が次の行へ折り返されます。グリッド状のレイアウトを作るときに活躍します。

nowrap でも縮まず、はみ出して切れる理由

nowrap のとき、子要素は本来 flex-shrink（初期値 1）によって縮んで1行に収まろうとします。しかしこのデモでは min-width: 22% を指定しているため、それ以上は縮めません。行き場を失った要素は親からはみ出し、切れて見えなくなります。「nowrap にしたら要素が消えた」という現象の正体はこれです。min-width や flex-shrink: 0 を外すか、wrap に切り替えて解決します。

⑧ gap — 要素間の余白を一括指定

1
2
3
4

gap: 0px

HTML
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>
CSS
.container {
  display: flex;
  gap: 0px;
  background: #0f0f1a;
  padding: 14px;
  border-radius: 10px;
}

.box {
  width: 60px;
  height: 72px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.box:nth-child(1) { background: linear-gradient(135deg, #06b6d4, #0284c7); }
.box:nth-child(2) { background: linear-gradient(135deg, #ec4899, #be185d); }
.box:nth-child(3) { background: linear-gradient(135deg, #22c55e, #15803d); }
.box:nth-child(4) { background: linear-gradient(135deg, #f97316, #c2410c); }
gap — 子要素の間隔を一括指定

margin で個別に余白を設定する代わりに、親要素の gap で子要素間の余白をまとめて指定できます。flex-wrap: wrap と組み合わせると、行間・列間の余白も同時に制御できます。

⑨ flex-grow — 余った幅を子要素に分配する

A
grow: 0
B
grow: 1
C
grow: 2

flex-grow: A=0 / B=1 / C=2

HTML
<div class="container">
  <div class="box-a">A</div>
  <div class="box-b">B</div>
  <div class="box-c">C</div>
</div>
CSS
.container {
  display: flex;
  gap: 6px;
  background: #0f0f1a;
  padding: 14px;
  border-radius: 10px;
}

.box-a, .box-b, .box-c {
  height: 72px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.box-a { background: linear-gradient(135deg, #06b6d4, #0284c7); flex-grow: 0; width: 80px; }
.box-b { background: linear-gradient(135deg, #ec4899, #be185d); flex-grow: 1; }
.box-c { background: linear-gradient(135deg, #22c55e, #15803d); flex-grow: 2; }
flex-grow — 余白を比率で分配する

コンテナに余った幅を、flex-grow の数値の比率で子要素に分配します。grow: 1 と grow: 2 なら余白を 1:2 で取得します。初期値は 0（分配しない）です。子要素のCSSに設定します。

⑩ flex ショートハンド — grow・shrink・basis を1行で

短い
中くらいのテキスト
とても長いテキストが入るボックス

flex: 0 1 auto

HTML
<div class="container">
  <div class="box">短い</div>
  <div class="box">中くらいのテキスト</div>
  <div class="box">とても長いテキストが入るボックス</div>
</div>
CSS
.container {
  display: flex;
  gap: 6px;
  background: #0f0f1a;
  padding: 14px;
  border-radius: 10px;
}

.box {
  flex: 0 1 auto;
  height: 72px;
  padding: 0 14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.82rem;
  color: #fff;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.box:nth-child(1) { background: linear-gradient(135deg, #06b6d4, #0284c7); }
.box:nth-child(2) { background: linear-gradient(135deg, #ec4899, #be185d); }
.box:nth-child(3) { background: linear-gradient(135deg, #22c55e, #15803d); }
flex — 3つのプロパティをまとめて書く

flex は flex-grow・flex-shrink・flex-basis をこの順で一括指定するショートハンドです。実務ではこの書き方が圧倒的によく使われます。flex: 1 は最頻出で、flex: 1 1 0% と同じ意味になります。

flex: 1 と flex: auto の違いが最大のポイント

flex: 1 は flex-basis が 0% になるため、中身の文字数を無視して全ボックスが完全な等幅になります。一方 flex: auto は flex-basis が auto なので、まず中身の幅を確保してから余白を均等配分します。デモでボタンを切り替えると、長いテキストのボックスだけ幅が変わることが確認できます。flex: none は 0 0 auto で、伸びも縮みもしません。

⑪ align-content — 折り返した「行」の縦位置

1
2
3
4
5
6
7
8

align-content: flex-start

HTML
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
</div>
CSS
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  height: 200px;
  background: #0f0f1a;
  padding: 14px;
  border-radius: 10px;
}

.box {
  width: 22%;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.box:nth-child(4n+1) { background: linear-gradient(135deg, #06b6d4, #0284c7); }
.box:nth-child(4n+2) { background: linear-gradient(135deg, #ec4899, #be185d); }
.box:nth-child(4n+3) { background: linear-gradient(135deg, #22c55e, #15803d); }
.box:nth-child(4n+4) { background: linear-gradient(135deg, #f97316, #c2410c); }
align-content — 複数行になったときだけ効く

⑦の flex-wrap: wrap で折り返しが起きて2行以上になったとき、その「行のかたまり」を縦方向のどこに置くかを決めます。1行しかないときは何も起こりません。親要素に height を指定して余白を作らないと効果が見えない点も align-items と同じです。

align-items との使い分け

align-items は「1行の中で各ボックスをどこに置くか」、align-content は「行そのものをどこに置くか」を決めます。名前が似ていて混同しやすいので、行が1本しかないなら align-items、複数行なら align-content と覚えておくと迷いません。

⑫ 縦横中央配置 — 最もよく使う実用パターン

中央に配置
HTML
<div class="container">
  <div class="content">中央に配置</div>
</div>
CSS
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 180px;
  background: #0f0f1a;
  padding: 14px;
  border-radius: 10px;
}

.content {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
  padding: 22px 36px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
}
縦横中央配置 — justify-content + align-items の組み合わせ

justify-content: center で横方向、align-items: center で縦方向を中央揃えにします。親要素に height を指定しないと縦方向の中央寄せが効かないため、必ず指定しましょう。

justify-content と align-items の軸に注意：
flex-direction が row（初期値）のとき、justify-content は横方向・align-items は縦方向に効きます。flex-direction: column にすると両者が入れ替わります。「方向が変わったら軸も変わる」と覚えましょう。

よくある質問

要素を右寄せにしたいときはどうしますか？

子要素をまとめて右へ寄せるなら、親要素に justify-content: flex-end を指定します。一方、「他は左のままで、最後のボタンだけ右端に置きたい」というときは、その要素に margin-left: auto を指定するのが定番です。余ったスペースをその要素の左マージンが全部吸収するため、1行だけで右寄せが実現できます。ナビゲーションバーのロゴとメニューの配置などでよく使う手法です。

justify-content: center を指定したのに中央に寄りません。

よくある原因は3つです。1つ目は、親要素に display: flex を指定し忘れているケース。2つ目は、子要素側に書いてしまっているケースで、justify-content は必ず親要素に指定します。3つ目は flex-direction: column になっているケースで、このとき justify-content は縦方向に働くため、横方向の中央寄せは align-items: center の担当に入れ替わります。

align-items: center が効かないのはなぜですか？

親要素に高さがないことがほとんどです。親の高さが中身の高さぴったりだと、縦方向に動かせる余白がゼロなので、中央に寄せても見た目が変わりません。height や min-height を指定して余白を作れば効果が現れます。⑫の縦横中央配置のデモが、この指定を含んだ最小構成になっています。

flex: 1 と flex-grow: 1 は同じものですか？

違います。flex: 1 は flex: 1 1 0% の省略形で、flex-basis が 0% になります。中身の文字数を無視して完全な等幅になるのが特徴です。対して flex-grow: 1 だけを書いた場合、flex-basis は初期値の auto のままなので、中身の幅を確保したうえで余白だけを分け合います。等幅に並べたいのに文字数で幅がずれる、という失敗はここが原因です。詳細は⑩の flex ショートハンドで切り替えながら確認できます。

Flexbox と Grid はどう使い分けますか？

Flexbox は「1次元」、Grid は「2次元」のレイアウトが得意です。横一列のナビゲーション、ボタンの並び、アイコンとテキストの横並びなど、1方向に要素を並べるなら Flexbox が簡単です。行と列の両方をきっちり揃えたいカードギャラリーや、ページ全体の骨格を組むなら Grid のほうが素直に書けます。両者は排他ではなく、Grid で全体を組んでその中のパーツを Flexbox で並べる、という併用が実務では一般的です。Grid の実装解説はこちら。

関連記事

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

あわせて読みたい
Webデザイン・UIコンポーネント集（HTML/CSS/JS） HTML / CSS / JAVASCRIPT · 随時更新中 WebデザインとUI実装例集 Webサイトやアプリで使われるUIコンポーネント・デザインパターンをまとめました。それぞれのカ…
HTML/CSS/JavaScript
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次