STEP C：Flexboxで要素が縮まない／並びが乱れる

visibility_off現象

• Flexコンテナ内の子要素が縮まらず、親幅をはみ出してレイアウトが崩れる
• 子要素同士の間隔が不揃い、期待通りに横並びにならない

---

help_outline原因

初期 min-width の設定

Flexアイテムはデフォルトで min-width: auto のため、中身のコンテンツ幅よりは小さくならず、結果的にはみ出すことがあります。

flex プロパティの未指定

flex-grow（伸び率）や flex-shrink（縮み率）を設定しないと、要素の伸縮が柔軟に制御できません。

コンテナや子要素に余計な固定幅がある

width を明示的に指定しすぎると、Flexbox本来の自動分配機能がうまく働きません。

---

build対策・コード例

/* Flexコンテナの基本設定 */
.flex-container {
  display: flex;
  gap: 16px;                /* 子要素間の余白 */
}

/* 子要素に flex を指定 */
.flex-item {
  flex: 1 1 0;              /* grow:1, shrink:1, basis:0 */
  min-width: 0;             /* コンテナ幅に合わせて確実に縮む */
}

• flex: 1 1 0 は「空いたスペースを均等に分配し、必要であれば縮む」という便利な一括指定です。
• min-width: 0 を加えることで、子要素が親要素の幅内に収まるよう強制できます。

---

bug_reportデバッグ方法

開発者ツールでレイアウトを確認

Chromeなどの開発者ツール（F12キー）の「Elements」パネルで、コンテナと子要素をそれぞれ選択し、「Computed」タブで実際に適用されている flex-basis や min-width の値を確認します。

背景色やアウトラインで可視化

各要素に一時的に枠線を引くことで、サイズや余白の振る舞いを視覚的に捉えやすくなります。

.flex-container, .flex-item {
  outline: 1px dashed red;
}

---

school応用ポイント：複数行レイアウト

flex-wrap を使ってアイテムを折り返したい場合は、コンテナに以下を追加します。

.flex-container {
  flex-wrap: wrap;       /* 子要素を複数行に折り返す */
}
.flex-item {
  /* 3列レイアウトの計算例（gapの大きさを考慮） */
  flex: 0 1 calc(33.333% - 16px);
}

※display: grid; を使うと、より高度で細かな行列の制御が可能です。

---

---