Flexbox完全ガイド

1. Flexboxとは？

Flexbox（Flexible Box Layout）は、要素を柔軟に配置するためのCSSレイアウトモジュールです。

要素を横並び・縦並びに簡単に配置できる
中央揃え、均等配置が簡単
レスポンシブデザインに最適
要素の順序を自由に変更できる

2. 基本構造

Flexboxは親要素（コンテナ）と子要素（アイテム）で構成されます。

             
                /* 親要素にdisplay: flexを指定 */
                .flex-container {
                    display: flex;
                }
                
                /* 子要素は自動的にflexアイテムになる */
                .flex-item {
                    /* 個別のスタイル */
                }
              
            

デモ：基本のFlex

アイテム1

アイテム2

アイテム3

3. 主軸（Main Axis）と交差軸（Cross Axis）

Flexboxには2つの軸があります：

主軸（Main Axis）: アイテムが並ぶ方向
交差軸（Cross Axis）: 主軸に垂直な方向

→ 主軸（Main Axis）

↓ 交差軸（Cross Axis）

4. インタラクティブデモ - 試してみよう！

flex-direction:

justify-content:

align-items:

flex-wrap:

1

2

3

           
            .flex-container {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: stretch;
                flex-wrap: nowrap;
            }
            
            

5. 主要プロパティ一覧

🎯 コンテナ（親要素）のプロパティ

display

flex | inline-flex

Flexboxを有効化

flex-direction

row | column

アイテムの並ぶ方向

justify-content

主軸方向の配置

center, space-between等

align-items

交差軸方向の配置

center, stretch等

flex-wrap

wrap | nowrap

折り返しの設定

gap

アイテム間の余白

gap: 1rem;

📦 アイテム（子要素）のプロパティ

flex-grow

伸びる比率

余白を埋める

flex-shrink

縮む比率

スペース不足時

flex-basis

基準サイズ

初期の幅・高さ

align-self

個別の配置

align-itemsを上書き

order

表示順序

HTMLと異なる順序

flex

省略記法

flex: 1 1 auto;

6. よくある使用例

例1: 要素を中央に配置

              
                .center-box {
                    display: flex;
                    justify-content: center;  /* 横方向中央 */
                    align-items: center;      /* 縦方向中央 */
                    height: 200px;
                }
              
            

中央配置

例2: 均等に配置（ナビゲーション）

              
                .nav {
                    display: flex;
                    justify-content: space-between;  /* 両端揃え */
                    align-items: center;
                }
             
            

ホーム

サービス

お問い合わせ

例3: カードレイアウト

             
                .card-container {
                    display: flex;
                    flex-wrap: wrap;        /* 折り返し有効 */
                    gap: 1rem;              /* アイテム間の余白 */
                }

                .card {
                    flex: 1 1 300px;        /* 最小300px、余白は均等に */
                }
                
            

カード1

カード2

カード3

7. 🎯 あなたのFooter問題の解決

あなたのケースでの最適な解決方法：

              
                footer {
                    background: rgba(255, 255, 255, 0.95);
                    backdrop-filter: blur(10px);
                    border-top: 1px solid rgba(255, 255, 255, 0.2);
                    margin-top: 3rem;
                }

                .footer-content {
                    display: flex;                    /* Flexboxを有効化 */
                    flex-direction: column;           /* 縦並び */
                    align-items: center;              /* 横方向中央（交差軸） */
                    justify-content: center;          /* 縦方向中央（主軸） */
                    padding: 2rem 0;
                }
    
                .footer-text {
                    margin: 0;                        /* marginは不要 */
                }
                
            

なぜこれで解決するのか：

display: flex でFlexboxを有効化
flex-direction: column で子要素を縦並びに
align-items: center で横方向（交差軸）の中央揃え
justify-content: center で縦方向（主軸）の中央揃え

🎨 Flexbox完全ガイド