HTML/CSS基礎 2025.10.11

【Flexbox完全攻略】横並び・中央寄せ・レスポンシブを制す最強レイアウト基礎

コンテンツ 非表示

1 第1章：Flexboxとは？

2 第2章：親プロパティの基本（整列・折返し）

3 第3章：子プロパティ（伸縮・基準幅・順序）

4 第4章：実務パターン（ナビ・ボタン列・カード）

第1章：Flexboxとは？

Flexboxは、要素の横・縦の整列を直感的に行えるレイアウト方式です。従来のfloatやinline-blockでは難しかった「中央寄せ」「等間隔配置」「高さ揃え」などが簡単にできます。

ポイント： 親にdisplay: flex;を指定すると、子要素は自動で「フレックスアイテム」になります。


<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>


.container { 
display:flex; 
gap:20px; 
}
.item { 
flex:1; 
background:#e9f4fb; 
padding:20px; 
text-align:center; 
border-radius:8px; 
color:#1f3a56; 
}

第2章：親プロパティの基本（整列・折返し）

最頻出はjustify-content（横）とalign-items（縦）、そしてflex-wrap（折返し）です。


.container {
  display:flex;
  justify-content:space-between; /* 横方向：両端 */
  align-items:center;            /* 縦方向：中央 */
  flex-wrap:wrap;                /* 折返し */
  gap:20px;
}

中央寄せなら justify-content:center、高さ揃えなら align-items:stretch（デフォルト）を理解しましょう。

第3章：子プロパティ（伸縮・基準幅・順序）

カードレイアウトではflexの3要素（grow / shrink / basis）を覚えると自由度が増します。


.item {
  flex: 1 1 260px;   
/* grow 1 / shrink 1 / basis 260px */
/* = flex-grow:1; flex-shrink:1; flex-basis:260px; */
}
.item--first {
 order: -1;　/* 並び順を前にする */
 }

覚え方： flex: 伸ばす / 縮める / 基準幅。orderで視覚的順序だけ入替可能（スクリーンリーダはHTML順）。

第4章：実務パターン（ナビ・ボタン列・カード）

① ヘッダーナビ


.header { 
display:flex;
justify-content:space-between; 
align-items:center; 
}

② ボタン2列


.buttons { 
display:flex; 
gap:12px; 
justify-content:center; 
}

③ 等間隔カード


.cards { 
display:flex; 
gap:24px; 
}
.card { 
flex:1; 
background:#fff; 
padding:24px; 
border-radius:8px; 
box-shadow:0 2px 6px rgba(0,0,0,.08); 
}

第5章：レスポンシブ（縦積み切替）

画面幅でflex-directionを切り替えます。


.container { 
display:flex; 
gap:20px; 
}
@media (max-width: 768px){ 
　.container { 
　flex-direction:column; 
　} 
}

隙間はgapで統一。スマホ時はgapを小さくするなど粒度調整も◎。

まとめ

親：整列（justify/align）と折返し（wrap）
子：flex（grow/shrink/basis）で伸縮・基準幅
実務：ナビ／ボタン列／カードで即戦力

Blog