LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@k_hifumi

Flexbox編

Posted at

自分がわからなかったのを調べて解決したメモ書きをChatGPTに綺麗にしてもらったものです。

🧩 Flexboxとは？

FlexboxはCSSでレイアウトを作るための仕組み。
特徴は 要素の「並び方」や「余白の調整」 を柔軟にできること。

従来の float や inline-block と違って：

  • 中央揃えが簡単にできる
  • 子要素の幅を自動調整して等間隔にできる
  • 横並び・縦並びを自由に切り替えられる

というメリットがある。

🏗 基本の書き方

.container {
    display: flex; /* Flexboxを有効化 */
}

これで .container の 子要素（flex item） がFlexboxのルールで並ぶようになる。

🔧 主なプロパティ

親（コンテナ）に使うもの

  1. flex-direction
    並びの方向を決める。
    flex-direction: row;        /* 横並び（デフォルト） */
    flex-direction: row-reverse;/* 横逆 */
    flex-direction: column;     /* 縦並び */
    flex-direction: column-reverse;
  1. justify-content
    主軸（並び方向）の配置。
    justify-content: flex-start; /* 左寄せ / 上寄せ */
    justify-content: flex-end;   /* 右寄せ / 下寄せ */
    justify-content: center;     /* 中央揃え */
    justify-content: space-between; /* 両端揃え＋均等 */
    justify-content: space-around;  /* 余白を均等に配分 */
    justify-content: space-evenly;  /* 完全均等 */
  1. align-items
    交差軸（縦 or 横）の揃え方。
    align-items: flex-start; /* 上揃え */
    align-items: flex-end;   /* 下揃え */
    align-items: center;     /* 中央揃え */
    align-items: stretch;    /* 高さを揃える（デフォルト） */
    align-items: baseline;   /* テキストのベースライン揃え */
  1. flex-wrap
    子要素がはみ出すときの折り返し。
    flex-wrap: nowrap;   /* 折り返さない（デフォルト） */
    flex-wrap: wrap;     /* 折り返す */
    flex-wrap: wrap-reverse;
  1. align-content
    複数行（折り返し時）の縦方向の揃え方。
    justify-content の縦版みたいなもの。
    align-content: flex-start;   /* 全部の行を上（開始側）に寄せる */
    align-content: flex-end;     /* 全部の行を下（終了側）に寄せる */
    align-content: center;       /* 全部の行を中央に寄せる */
    align-content: space-between;/* 行と行の間を均等に広げる（端はくっつく） */
    align-content: space-around; /* 行の間に均等な余白。上下にも半分ずつ余白 */
    align-content: stretch;      /* 行を縦方向いっぱいに広げる（デフォルト） */

子（アイテム）に使うもの

  1. flex-grow
    余ったスペースをどれくらい伸ばすか。
    flex-grow: 1; /* 均等に広がる */
    flex-grow: 2; /* 他より2倍広がる */
  1. flex-shrink
    収縮の比率（画面が狭いときの縮み方）。
    flex-shrink: 1; /* デフォルト：縮む */
    flex-shrink: 0; /* 縮まない */
  1. flex-basis
    アイテムの基準サイズ。
    flex-basis: 200px; /* 最初に200px確保 */
  1. flex（まとめて書ける）
    flex: grow shrink basis; 
    flex: 1;           /* flex-grow:1, shrink:1, basis:0 */
    /* 余白があれば均等に伸び、足りなければ均等に縮み、基準幅は0から伸び縮みの幅を計算する指定 */
    flex: 0 0 100px;   /* 固定幅100px */
    flex: 2 1 auto;    /* grow2, shrink1, 自動サイズ */
  1. align-self
    個別に縦方向を指定。
    align-self: center;
    align-self: flex-start;
    align-self: flex-end;

🎯 よくある使い方例

1. 中央揃え（縦横両方）

.container {
    display: flex;
    justify-content: center; /* 横中央 */
    align-items: center;     /* 縦中央 */
    height: 100vh;
}

2. 横並びで均等配置

.container {
    display: flex;
    justify-content: space-between;
}

3. グリッドっぽく折り返し

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* 子要素の間隔 */
}
.item {
    flex: 1 1 200px; /* 最低200pxで並ぶ */
}

💡 Flexboxを使うといい場面

  • ナビゲーションバー
  • カードレイアウト（横並び・縦並び切替）
  • ボタンやラベルの中央揃え
  • フッターを画面下に固定

❓「均等に広げる」と「均等に縮める」ってどういうこと？

1️⃣ 均等に広げる（flex-grow）

場面：コンテナに余白が残っているとき
→ 子要素に「余っている幅」をどれだけ分けるかを決める。

例：

.container {
    display: flex;
    width: 600px;
}

.item {
    flex-grow: 1;
    flex-basis: 100px;
}
  • .item が3つある場合
    まず全員に 100pxずつ確保 → 300px使用
    → 余り = 600 - 300 = 300px
    → flex-grow:1 なので全員に均等100pxずつ追加
    → 最終的に 200px × 3 = 600px になる

👉「余白があるときに均等に分け合って広がる」って意味。

2️⃣ 均等に縮める（flex-shrink）

場面：コンテナが子要素の合計より狭いとき
→ 子要素をどれだけ縮めるかを決める。

例：

.container {
    display: flex;
    width: 300px;
}

.item {
    flex-shrink: 1;
    flex-basis: 150px;
}
  • .item が3つある場合
    まず全員に 150pxずつ確保 → 450px必要
    → でもコンテナは300pxしかない
    → 150px余分なので「全員で均等に縮む」
    → 50pxずつ縮めて 100px × 3 = 300px

👉「スペースが足りないときに均等に縮まる」って意味。

3️⃣ 両方まとめた例

.container {
    display: flex;
    width: 600px;
}

.item {
    flex: 1 1 100px; /* grow:1, shrink:1, basis:100px */
}
  • 広いとき → 余りを均等に分けて広がる
  • 狭いとき → 足りない分を均等に削って縮む

だから「均等に広げて均等に縮める」＝ 状況に合わせてバランス良くサイズ調整する

Flexboxで子要素を並べるときに、inline-block みたいに中身のテキストの幅だけ要素を縮めたい!!


結論！flexの初期値をリセットして「内容サイズに合わせる」

🔧 方法1: flex: 0 0 auto; 

.item {
  flex: 0 0 auto; /* 中身の幅にぴったり合わせる */
}
  • flex-grow: 0 → 余白があっても広がらない
  • flex-shrink: 0 → 小さくもならない
  • flex-basis: auto → 内容サイズを基準にする

これで inline-block とほぼ同じ挙動になる。

🔧 方法2: flex: none; 

.item {
  flex: none; /* flex: 0 0 auto の省略形 */
}

これも 内容の幅そのまま。inline-block っぽい。

🔧 方法3: width: auto; と組み合わせ

Flexbox はデフォルトで子要素に flex: 0 1 auto; が付く。
だから放っておくと 縮む可能性がある。
縮ませたくないなら、flex-shrink: 0; を付けておくと安心。

.item {
  flex-shrink: 0; /* 中身より小さくならない */
}

✅ まとめ

Flexbox で inline-block みたいにしたいなら：

.item {
  flex: none;        /* 中身の幅に合わせる */
  /* or flex: 0 0 auto; */
}

で解決！ 🎉

❓ 最低限は確保して欲しいけど伸びすぎるのは嫌な時はどうしたらいいの？


結論！ flex-basis と max-width / min-width を組み合わせると実現できる

やりたいこと

  • 最低限の幅は確保したい → min-width または flex-basis
  • 必要以上に伸びすぎて欲しくない → max-width

例1: 最低200pxは確保したい

.item {
  flex: 1 1 200px; /* 基準幅200px、伸び縮みOK */
  min-width: 200px; /* 200px以下にはならない */
}

これで「普段は200px基準で、余白があれば伸びる。でも200pxより小さくはならない」になる。

例2: 伸びすぎ防止（最大400pxまで）

.item {
  flex: 1 1 200px; 
  min-width: 200px;
  max-width: 400px; /* 400px以上には広がらない */
}

これで「200〜400pxの範囲で柔軟に伸び縮み」する。

ポイントまとめ

  • 最小確保 → min-width か flex-basis
  • 伸びすぎ制御 → max-width
  • 両方 組み合わせれば「ここからここまで」の範囲で収まる

❓もし max-width 的に上限を決めつつ、それ以上は伸びないでほしい時は？。

💡「max-width を flex:none 的にしたい」場合の書き方

.item {
  flex: 0 1 auto;     /* 伸びないが、狭い時は縮む */
  max-width: 400px;   /* 上限を決める */
}

👉 こうすると：

  • 余白があっても勝手に伸びない（grow=0）。
  • でもスペースが足りないときは縮む（shrink=1）。
  • 伸びても 400px が上限。

✅ もし完全に固定幅にしたいなら

.item {
  flex: none;       /* 伸びない・縮まない */
  width: 400px;     /* 固定幅 */
}

これだと 「max-width」ではなく「width」 になるから、文字通りガチ固定。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?