MENU
Webコーディング（HTML/CSS/JavaScript）やEC-CUBEカスタマイズ、Webアプリなど
  1. ホーム
  2. プログラミング
  3. HTML/CSS/JavaScript
  4. CSS Flexbox 完全解説｜Flexbox Interactive Guide

CSS Flexbox 完全解説｜Flexbox Interactive Guide

HTML/CSS/JavaScript

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

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

① 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 に設定すると、収まりきらない要素が次の行に折り返されます。グリッド状のレイアウトを作るときに活躍します。

⑧ 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に設定します。

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

中央に配置
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 にすると両者が入れ替わります。「方向が変わったら軸も変わる」と覚えましょう。

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

あわせて読みたい
Webデザイン・UIコンポーネント集（HTML/CSS/JS） Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例やデザイン例を纏めました。（随時更新中）実装方法などは別記事にコードや実装ポイントを公開してい…
HTML/CSS/JavaScript
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次