CSS Flexbox完全ガイド！初心者でもわかるレイアウト構築の基本

Flexboxとは？レイアウト構築を楽にする仕組みを解説

先生と生徒の会話形式で理解しよう

生徒

「CSSでWebページのレイアウトを簡単に整えたいんですが、Flexboxって何ですか？」

先生

「Flexboxは、複雑な配置を簡単にするためのCSSの仕組みです。箱を並べたり、中央揃えや間隔調整を手軽に行えます。」

生徒

「でも、HTMLの構造とか難しそうです…」

先生

「大丈夫です。FlexboxはHTMLのタグ構造を大きく変えずに、CSSだけでレイアウトを制御できるので、初心者でも安心して使えます。」

1. Flexboxとは何か？

Flexboxは正式には「Flexible Box Layout」と呼ばれ、Webページのレイアウトを柔軟に制御できるCSSの機能です。従来はfloatやpositionで手動で配置していましたが、Flexboxを使うと要素を自動的に横並びや縦並びに整列させることができます。画面サイズや要素の数に応じて、自動で調整されるのでレスポンシブデザインにも向いています。

2. Flexboxの基本の仕組み

Flexboxでは親要素に display: flex を指定し、子要素を「フレックスアイテム」と呼びます。親要素は「フレックスコンテナ」と呼ばれ、子要素は自動的に横方向（row）や縦方向（column）に並びます。並べる方向は flex-direction で設定できます。

3. Flexboxを使うメリット

Flexboxを使うと、例えばアイテムの中央揃え、均等な間隔、順序の入れ替え、伸縮が簡単にできます。画面サイズに応じた自動調整もできるので、手動で細かい位置を計算する必要がありません。初心者でも、HTML構造をあまり変更せずに美しいレイアウトを作れるのが大きな利点です。

4. Flexboxの主要プロパティ

代表的なプロパティを簡単にまとめると次の通りです。

justify-content：横方向の配置（左寄せ、中央、右寄せ、均等配置など）
align-items：縦方向の揃え方（上揃え、中央揃え、下揃えなど）
flex-wrap：折り返しの有無（複数行に自動で折り返すかどうか）
order：HTMLの順序を変えずに表示順序を変更
flex-grow：空きスペースに応じて伸びる割合を指定

5. Flexboxの簡単なサンプル


<style>
.flex-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100px;
    background-color: lightgray;
}
.flex-item {
    width: 50px;
    height: 50px;
    background-color: blue;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
</div>

ブラウザ表示

この例では、3つのボックスを横方向に均等に並べ、縦方向も中央に揃えています。Flexboxを使うことで、簡単に均等配置や中央揃えができます。

6. Flexboxとレスポンシブデザイン

Flexboxは画面サイズに応じて自動的に調整されるため、スマホやタブレットでもレイアウトが崩れにくくなります。flex-wrapを使えば要素が狭い画面で折り返すように設定でき、メニューやカード型レイアウトなどに最適です。

7. 初心者向けの学習ポイント

最初はdisplay: flex、justify-content、align-itemsだけを使って簡単な横並びや中央揃えを試してみましょう。少し慣れたらflex-directionやflex-wrap、flex-growを使って応用してみると、Flexboxの便利さがより実感できます。HTML構造をほとんど変えずに自由なレイアウトが作れるので、Webページ作りが格段に楽になります。

2026年最新スキルアップ・実践セミナー