ブログ BLOG
HOME / ブログ / CSSの「flex」を完全マスター！レイアウトが劇的に楽になるFlexboxの基本

CSSの「flex」を完全マスター！レイアウトが劇的に楽になるFlexboxの基本

2026.05.17
  • CSS

Webサイトのコーディングにおいて、要素を横並びにしたり、中央揃えにしたりする「レイアウト作業」はかつて非常に面倒なものでした（float や position を駆使していた時代がありました）。

しかし現在、その悩みを一発で解決してくれるのが Flexbox（フレックスボックス） です。

この記事では、Flexboxの基本概念から、よく使うプロパティ、そして子要素に指定する「flex」プロパティの詳細まで、図解を交えながら分かりやすく解説します。

1. Flexboxの基本概念：親（コンテナ）と子（アイテム）

Flexboxを理解するための最初のステップは、「親要素（Flexコンテナ）」と「子要素（Flexアイテム）」の関係を把握することです。

  • Flexコンテナ（親要素）: Flexboxのレイアウトを適用する外枠となる要素です。ここに display: flex; を指定することで、魔法が始まります。
  • Flexアイテム（子要素）: Flexコンテナの中に直接配置されている要素です。コンテナの指示に従って、柔軟に並び方やサイズが変わります。

また、Flexboxには「主軸（Main Axis）」と「交差軸（Cross Axis）」という方向の概念があります。デフォルトでは主軸は左から右（横方向）、交差軸は上から下（縦方向）になります。

2. 親要素（コンテナ）に指定する必須プロパティ

要素を横並びにするには、親要素に display: flex; を指定します。これに加えて、以下のプロパティを組み合わせることで自由自在にレイアウトできます。

display: flex;（おまじない）

CSS

.container {
  display: flex;
}

これを指定した瞬間、中の子要素はデフォルトで左詰めの横並びになります。

justify-content（主軸の配置）

水平方向（主軸）のどこに要素を配置するか、また要素間の余白をどうするかを決めます。

  • flex-start (デフォルト): 左詰め
  • center: 中央揃え
  • flex-end: 右詰め
  • space-between: 両端揃え（要素間の余白が均等になる）
  • space-around: 各要素の周囲に均等な余白ができる

align-items（交差軸の配置）

垂直方向（交差軸）の配置を決めます。かつて最も難しかった「縦方向の中央揃え」も、これ一つで解決します。

  • stretch (デフォルト): 親要素の高さに合わせて子要素が伸びる
  • center: 縦方向の中央に配置
  • flex-start: 上詰め
  • flex-end: 下詰め

3. 子要素（アイテム）に指定する「flex」プロパティの正体

親要素で全体の並び方を決めた後、「特定の子要素だけ幅を広くしたい」「画面幅に合わせて柔軟に伸縮させたい」という場合に使うのが、子要素自身に指定する flex プロパティです。

実は flex プロパティは、以下の3つのプロパティをまとめたショートハンド（略記法）です。

CSS

.item {
  /* flex: [flex-grow] [flex-shrink] [flex-basis]; */
  flex: 1 1 auto; 
}

① flex-grow（伸びる割合）

親要素に余白がある場合、他の要素と比べてどれくらい余白を分け合って伸びるかを指定します（デフォルトは 0 = 伸びない）。 すべての子要素に flex-grow: 1; を指定すると、親要素の幅を均等に分割してぴったり埋めてくれます。

② flex-shrink（縮む割合）

親要素の幅が狭くなった場合、他の要素と比べてどれくらい縮むかを指定します（デフォルトは 1 = 均等に縮む）。 0 を指定すると、画面幅が狭くなってもその要素だけは縮まなくなります（先ほどのマーキーアニメーションなどで、文字を潰したくない時に flex-shrink: 0; を使ったのはこのためです）。

③ flex-basis（ベースとなる幅）

要素の基準となるサイズ（幅または高さ）を指定します（デフォルトは auto = 中身のコンテンツのサイズ）。 width プロパティと似ていますが、Flexbox環境下では flex-basis の方が優先的に扱われます。

よく使う省略形のパターン

実務では、いちいち3つ全てを書くことは少なく、以下のような書き方をよく使います。

  • flex: 1; （＝ flex: 1 1 0%;）
    • 余白があれば伸びるし、狭ければ縮む。要素の基本幅は無視して、兄弟要素間で比率に合わせてきっちり分割したい時に使います。
  • flex: none; （＝ flex: 0 0 auto;）
    • 伸びないし、縮まない。中身のサイズのまま絶対に形を崩したくない時に使います。

4. まとめ

Flexbox（display: flex）は、親要素で「全体の並び方や揃え方」をコントロールし、必要に応じて子要素の flex プロパティで「個別の伸縮具合」を調整する仕組みです。

  • 親要素（コンテナ）には display: flex;、justify-content、align-items を指定。
  • 子要素（アイテム）には、柔軟にサイズを変えたい時に flex（flex-grow, flex-shrink, flex-basis）を指定。

これらを理解するだけで、ヘッダーのナビゲーション、カード型の横並びレイアウト、画面中央への完璧なセンタリングなど、あらゆるWebレイアウトが驚くほど簡単に実装できるようになります。

Xでシェア Facebook LINE
 
一覧に戻る