【CSS】Flexbox（display: flex）の使い方 完全ガイド

今回の記事では、CSSのflex（flexbox）について解説していきます。

flex は、CSSで要素のレイアウト（配置やサイズ）を柔軟に制御できる仕組みで、floatやinline-blockなどの従来手法では実現が難しかったレイアウトを、少ないコードで直感的に実装できるのがflex（flexbox）の魅力です。

Flexboxとは？flexとの違い

Flexbox（Flexible Box Layout）は概念のことであり、flexは実際に適用するプロパティのことです。

親要素に display: flex を指定することで、「要素の並び方」や「サイズの比率」を柔軟にコントロールできるのが特徴です。

他のレイアウト手法との違い

特にflexは、
「横に均等に並べる」「中央に寄せる」「高さを揃える」「一部だけ右寄せする」
など、今まで面倒だったことが数行のCSSで実現できます。

flexのデモツールのご紹介

Flexのチートシートや記事は数多く出回っていますが、実際に動かしてみることで得られる理解の方が深く、確実です。

特に、Chromeのデベロッパーツールで確認されるような動きを再現できるツールを使えば、各プロパティがレイアウトにどう影響するかを直感的に掴むことができます。

便利なChromeのデベロッパーツール

Chromeでは、要素に display: flex が指定されていると、開発者ツール上に 「flex」バッジ が表示されます。

このバッジをクリックすると、以下のような設定パネルが表示され、現在の flex-direction や justify-content、align-items などの状態を確認することができます。

flexのデモツール

本記事では、Flexboxの仕組みを視覚的に理解できるように、確認用のデモツールをご用意しました。

flex-direction や justify-content、align-items など、主要なプロパティの挙動を実際に操作しながら確認することができます。

記事を読み進めながら、ぜひツールを併用してご活用ください。

豊富なオリジナルブロックでLPをかんたんに作成できるLP Creator

デザイン・機能・SEO・収益化にこだわったメディア運営者向け「STREETIST」

flexの基本構文とプロパティ

基本的なレイアウト例（中央揃え）

以下は、flexを使って中央に要素を配置する最も基本的なパターンです。

<div class="container">
  <div class="item">テキスト</div>
  <div class="item">テキスト</div>
  <div class="item">テキスト</div>
</div>

.container {
  display: flex;
  flex-direction: row; /* 横並び（デフォルト）*/
  justify-content: center; /* 主軸(横)  中央 */
  align-items: center; /* 交差軸(縦) 中央 */
  height: 300px;
  background: #f0f0f0;
}
.item {
  background: #ccc;
  border: solid 1px #fff;
  padding: 20px;
}

このように親要素(container)の中央に子要素(item)が横方向に並びます。

親要素に指定するプロパティ

• justify-content は、flex-direction に沿った方向になります。（主軸方向）
• align-items は、それに交差する方向の軸になります。（交差軸）

• justify-content の3つのプロパティの違いについて
  
  space-between（両端揃え）は、両端に余白がなくなります。
  space-around（均等）は、要素間の余白だけが均等になります。
  space-evenly(すべての隙間が均等）は、要素間の余白だけでなく、両端の余白も均等になります。
  
  ※ 紫の箇所が要素間の余白になります。

• align-content は 複数行に折り返された場合の全体の行の整列になります。
  flex-wrap: wrap が有効でないと意味がない点に注意しましょう。
  nowrap（初期値）だと、子要素はすべて1行に収まるように配置され、align-content は無効になります。

このあたりは上記のツールを利用して、どのようなレイアウトになるかご確認ください。

子要素に指定するプロパティ

子要素にも細かい設定を加えることで、より柔軟なレイアウト制御が可能になります。

以下のようなプロパティを使うと、「どの要素がどれだけ伸びるか」「どれくらい幅を持つか」などを個別に指定できます。

子要素のデフォルト値

先程のコードの子要素には flex の指定がありませんでしたが、デフォルト値がはいっており、以下の値が設定されています。

.item {
  flex: 0 1 auto;
}

これは次のような意味になります：

• flex-grow: 0 → 空きスペースがあっても拡張しない
• flex-shrink: 1 → スペースが足りない場合は縮小する
• flex-basis: auto → 内容に応じたサイズを基準にする

つまり子要素は、初期状態では「要素の中身のサイズになり、必要なら縮む」という動作になります。

そのため、DEMOの表示は子要素が広がらず、完全に中央揃えになっています。

たとえば、以下のように指定すると、子要素が空きスペースを均等に取り合うようなレイアウトになります。

.item {
  flex: 1 1 0; /* 空きがあれば拡張、足りなければ縮小、初期値は0 */
}

先程のコードの子要素に上記をいれただけのDEOMです。

横幅いっぱいに均等に広がったのがわかります。

では真ん中の子要素だけにこの flex: 1 1 0;　を入れるとどうなるでしょうか？

<div class="container">
  <div class="item">テキスト</div>
  <div class="item grow">テキスト</div>
  <div class="item">テキスト</div>
</div>

.item {
  &.grow{
    flex: 1 1 0;
  }
  background: #ccc;
  border: solid 1px #fff;
  padding: 20px;
}

このように真ん中の子要素だけが、空きスペース分広くなり、全体要素が幅広で表示されます。

「flex-basis」の補足

「flex-basis」は、子要素が伸びたり縮んだりする前の「基準サイズ」を決めるプロパティです。

flex-basis: 800px; とすると、どんなに空きスペースがあっても、まずは800pxを確保します。

そこからflex-grow / flex-shrink に応じて実際の表示サイズが調整されます。

「基準サイズ」というと難しいのですが、具体例として、親要素の幅が 1000px、子要素が3つある場合を考えてみます。

• 子要素1：flex: 1 1 100px　拡大率1倍で基準サイズは100px
• 子要素2：flex: 1 1 100px　拡大率1倍で基準サイズは100px
• 子要素3：flex: 2 1 400px　拡大率2倍で基準サイズは400px

まずは 基準サイズの合計 を計算します：

• 100px（子1）＋100px（子2）＋400px（子3）＝600px

親要素の幅は1000pxなので、余った400pxは flex-grow に応じて次のように配分されます：

• growの比率合計：1 + 1 + 2 = 4
• 子1：100px + (400px × 1/4) = 200px
• 子2：100px + (400px × 1/4) = 200px
• 子3：400px + (400px × 2/4) = 600px

結果的に、表示サイズは 200px・200px・600px になります。

このように flex-basis は「起点となるサイズ」であり、
そこから flex-grow を使って余白をどのように分けるかを決める仕組みになっています。

flex-basis は、autoにするとその中身のコンテンツの大きさになり、０を指定すると基準サイズが0pxになります。

このように、一部の子要素だけに flex を指定することで、特定の要素だけを目立たせる（広げる）ようなレイアウトが簡単に実現できます。

たとえば、メニューの中で中央だけ幅を広げたい、タイトル部分だけ柔軟に表示したいといった用途に使えます。

flexの様々なオプションについて

折り返しの指定

上記のツールを利用しているとお気づきになったかもしれませんが、

例えば、親要素の幅を150pxにして、justify-contentとalign-itemsをcenterにすると子要素が親要素からはみ出てしまっています。

実際、

「要素が並びすぎてはみ出してしまう」
「スマホでは自動で折り返してほしい」

そんなケースもあるのではないでしょうか。
そのような場合に便利なのが親要素に指定する flex-wrap プロパティです。

自動折り返し（flex-wrap）

指定がない場合、nowrap（デフォルト）では1行に並べ続けてしまいますが、
wrap を指定すれば、自動的に複数行に折り返すレイアウトが可能になります。

先程のDEMOに子要素を増やして、

flex-wrap: wrap; /* 折り返しを許可 */

をいれました。

画面を縮小すると要素が自動で折り返ししているのが確認できると思います。

<div class="container">
  <div class="item">テキスト</div>
  <div class="item">テキスト</div>
  <div class="item">テキスト</div>
  <div class="item">テキスト</div>
  <div class="item">テキスト</div>
  <div class="item">テキスト</div>
</div>

.container {
  display: flex;
  flex-direction: row; /* 横並び */
  justify-content: center; /* 主軸(横) 中央 */
  align-items: center; /* 交差軸(縦) 中央 */
  flex-wrap: wrap; /* 折り返しを許可 */
  background: #f0f0f0;
}

.item {
  background: #ccc;
  border: solid 1px #fff;
  padding: 20px;
  width: 150px;
  text-align: center;
}

子要素（内側のコンテンツ）の折り返し

では、要素そのものは横並びでいいけど、中のテキストや画像が折り返してくれない、
そんな場面に出会ったことはありませんか？

そんなときは、通常よく利用する、

overflow-wrap: break-word;
word-wrap: break-word;

を入れて改行させます。

<div class="container">
  <div class="item">
    ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ
  </div>
  <div class="item">
    ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ
  </div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

子要素の内容で揃える（align-items: baseline）

baseline は、子要素のテキストの位置を揃えるための指定です。

複数の子要素が異なる高さを持っていても、それらの文字のベースラインが揃うように配置されます。

この指定は、テキストを含む要素を横並びに配置する際に、「文字の高さ基準で揃えたい」というケースに有効です。

<div class="container">
  <div class="item">小</div>
  <div class="item">大</div>
  <div class="item">中</div>
</div>

.container {
  display: flex;
  align-items: baseline; /* 文字のベースラインを揃える */
  gap: 20px;
}
.item:nth-child(1) { font-size: 16px; }
.item:nth-child(2) { font-size: 46px; }
.item:nth-child(3) { font-size: 36px; }

記の例では、3つの要素がそれぞれ異なる font-size を持っていますが、align-items: baseline によって、文字の底辺が一直線に揃えられます。

子要素ごとに垂直方向の揃えを指定する(align-self)

Flexbox では親要素に align-items を指定することで、すべての子要素の交差軸（通常は縦方向）の位置を一括で揃えることができました。

子要素ごとに個別に揃え位置を変えたい場合は、子要素の個別に align-self を指定します。

<div class="container">
  <div class="item">1番目</div>
  <div class="item">2番目</div>
  <div class="item">3番目</div>
</div>

<style>
.container {
  display: flex;
  gap: 12px;
}
.item:nth-child(1) { align-self: flex-start; /* 上揃え */ }
.item:nth-child(2) { align-self: center; /* 中央 */ }
.item:nth-child(3) { align-self: flex-end; /* 下揃え */ }
</style>

このように親要素に指定している align-items のプロパティが子要素に指定し、align-selfを子要素個別の設定をすることができます。

親要素のプロパティを子要素に個別に指定するには？

それでは align-self のように、親要素の他のプロパティ（gap や justify-contentなど）を子要素個別に設定するプロパティはあるのでしょうか？

答えは、ありません。

align-self は用意されていますが、子要素単位で「左寄せ・右寄せ」などを混在させたい場合は、margin-left: auto や text-align の利用などで調整するのが一般的です。

例えば親要素の gap の代替として、子要素に margin を個別に指定します。

子要素の順番を指定する（order）

最後に、flex を使うと、HTMLの並び順とは関係なく表示順を変更することができます。
これは order プロパティを子要素に設定することで実現します。

動的に順番を入れ替えたい時に利用できます。

<div class="container">
  <div class="item">1番目</div>
  <div class="item">2番目</div>
  <div class="item">3番目</div>
</div>

<style>
.container {
  display: flex;
}
.item:nth-child(1) { order: 3; }
.item:nth-child(2) { order: 1; }
.item:nth-child(3) { order: 2; }
</style>

このようにすれば「3つ目で折り返し」など、明示的な制御が可能になります。

このDEMOでは、HTML上は「1 → 2 → 3」ですが、表示順は「2 → 3 → 1」になっています。

最後に

いかがでしょうか？

Flexboxはオプションが多く、一見複雑に感じるかもしれませんが、すべてを完璧に暗記する必要はありません。

基本的なプロパティの仕組みと挙動を理解しておけば、あとは実際のレイアウトで試しながら、Chromeのデベロッパーツールなどを活用して調整すれば十分対応できます。

ぜひ本ツールを活用しながら、実践的にFlexの挙動を体感してみてください。

他にもこんな記事があります。

【CSS】Grid Layout（display: grid）の基本ガイド 今回の記事では、CSSのGrid Layoutについて分かりやすく解説します。一見複雑そうに感じるGridですが、ポイントを押さえれば…

【CSS】display: contents の使用方法！便利な使い方を例を交えて解説します今回は「display: contents」について解説します。displayプロパティはよく使用すると思いますが、contentsを指定したことは…