CSSのFlexbox：モダンなレイアウト方法

メディアクエリに続いて、「Flexbox」を学びました。floatに代わる、より柔軟で強力なレイアウト手法です。

Flexboxとは

Flexboxは、モダンなレイアウト方法です。要素を簡単に横並びにしたり、配置を制御したりできます。

floatよりもシンプルで、レスポンシブデザインにも対応しやすいのが特徴です。

display: flex – 基本の指定

display: flex を親要素に指定すると、子要素が横並びになります。

<div class="container">
  <div class="box">ボックス1</div>
  <div class="box">ボックス2</div>
  <div class="box">ボックス3</div>
</div>

.container {
  display: flex; /* 親要素に指定 */
}

.box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  margin: 10px;
}

子要素（.box）が自動的に横並びになります。

親要素に合わせて伸縮

Flexboxは、親要素に合わせて子要素が伸縮します。

.container {
  display: flex;
  width: 100%;
}

.box {
  flex: 1; /* 均等に伸縮 */
}

3つのボックスがあれば、それぞれが親要素の1/3の幅になります。

flex-wrap: wrap – 折り返し

flex-wrap: wrap は、子要素のサイズに応じて折り返すプロパティです。

.container {
  display: flex;
  flex-wrap: wrap; /* 親要素に指定 */
}

.box {
  width: 300px;
}

重要: flex-wrap は親要素に指定します。

flex-wrapの違い

/* デフォルト（折り返しなし） */
.container {
  display: flex;
}
/* 子要素が縮小されて1行に収まる */

/* 折り返しあり */
.container {
  display: flex;
  flex-wrap: wrap;
}
/* 子要素のサイズを保ったまま、次の行に折り返す */

flex-direction: column – 縦並び

flex-direction: column は、子要素を上から下に並べるプロパティです。

.container {
  display: flex;
  flex-direction: column; /* 親要素に指定 */
}

flex-directionの値

値方向
row横並び（デフォルト）
column縦並び
row-reverse横並び（右から左）
column-reverse縦並び（下から上）

実用例：レスポンシブなカードレイアウト

<div class="card-container">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
  <div class="card">カード4</div>
</div>

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* カード間の余白 */
}

.card {
  width: 300px;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .card {
    width: 100%; /* 1列表示 */
  }
}

Flexboxとfloatの比較

項目floatFlexbox
横並びfloat: leftdisplay: flex
折り返し自動flex-wrap: wrap
クリアclear が必要不要
縦並びできないflex-direction: column
中央揃え複雑簡単

Flexboxの方が柔軟で、コードもシンプルです。

Flexboxのその他の便利なプロパティ

justify-content：横方向の配置

.container {
  display: flex;
  justify-content: center; /* 中央揃え */
}
  • flex-start: 左揃え（デフォルト）
  • center: 中央揃え
  • flex-end: 右揃え
  • space-between: 両端揃え
  • space-around: 均等配置

align-items：縦方向の配置

.container {
  display: flex;
  align-items: center; /* 縦方向の中央揃え */
  height: 200px;
}
  • flex-start: 上揃え
  • center: 中央揃え
  • flex-end: 下揃え
  • stretch: 伸ばす（デフォルト）

実用例：ナビゲーションバー

<nav class="navbar">
  <div class="logo">My Site</div>
  <div class="nav-links">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</nav>

.navbar {
  display: flex;
  justify-content: space-between; /* 両端に配置 */
  align-items: center;             /* 縦方向の中央揃え */
  padding: 20px;
  background-color: #333;
  color: white;
}

.nav-links a {
  margin-left: 20px;
  color: white;
  text-decoration: none;
}

今日の学びのポイント

  • Flexbox: モダンなレイアウト方法
  • display: flex: 親要素に合わせて子要素を伸縮・横並び
  • flex-wrap: wrap: 子要素のサイズに応じて折り返す（親要素に指定）
  • flex-direction: column: 子要素を上から下に並べる（親要素に指定）
  • Flexboxは親要素に指定する
  • floatより柔軟で、レスポンシブデザインに最適

Flexboxは、現代のWeb開発で最も重要なレイアウト手法の1つです。floatに代わる標準的な方法として、ぜひマスターしましょう。

コメント