プログラミング

Flexboxの基本と実践

最終更新： 22/04/2025
1 分の読み

Flexbox（フレックスボックス）は、CSS（カスケーディングスタイルシート）のレイアウトモジュールで、要素を効率的に配置するための強力なツールです。特に、画面サイズやコンテナのサイズが変化しても、レイアウトが柔軟に対応する必要がある場合に役立ちます。ここでは、Flexboxの基本的な概念から実際の使用例まで、詳細に解説します。

Flexboxの基本概念

Flexboxは、要素の配置方法を指定するためのCSSプロパティ群を提供します。これにより、要素が水平方向および垂直方向に自動的に整列し、スペースの分配や並び替えを柔軟に制御できます。

関連記事

主要なFlexboxプロパティ

Flexboxのレイアウトを構成するためには、主に次のCSSプロパティを使用します。

  1. display: flex;

    • Flexboxを適用したいコンテナにこのプロパティを設定します。このプロパティを使用すると、子要素はFlexboxのルールに従って配置されます。

    css
    .container {
  display: flex;
}

  2. flex-direction

    • 要素の並び順を設定します。デフォルトでは水平方向（row）に並びますが、垂直方向（column）にも変更可能です。

    css
    .container {
  display: flex;
  flex-direction: row; /* 水平方向（デフォルト） */
}

.container-vertical {
  display: flex;
  flex-direction: column; /* 垂直方向 */
}

  3. justify-content

    • 子要素がコンテナ内でどのように配置されるかを決定します。主に水平方向（またはflex-directionがcolumnの場合は垂直方向）の配置を制御します。

    • 値の例:

      • flex-start: 左寄せ（デフォルト）

      • flex-end: 右寄せ

      • center: 中央揃え

      • space-between: 要素間に均等なスペース

      • space-around: 要素の前後に均等なスペース

    css
    .container {
  display: flex;
  justify-content: center; /* 要素を中央揃え */
}

  4. align-items

    • コンテナ内の要素を垂直方向に揃えるために使用します。

    • 値の例:

      • flex-start: 上寄せ

      • flex-end: 下寄せ

      • center: 垂直方向で中央揃え

      • stretch: 要素がコンテナ全体に伸びる

    css
    .container {
  display: flex;
  align-items: center; /* 要素を縦方向に中央揃え */
}

  5. align-self

    • 特定の子要素に対して、個別にalign-itemsの設定をオーバーライドするために使用します。個別の要素を他の要素とは異なる位置に配置できます。

    css
    .item {
  align-self: flex-end; /* 特定の要素を下寄せ */
}

  6. flex-wrap

    • コンテナ内で、要素が一行に収まりきらない場合に、次の行に折り返すかどうかを決定します。

    css
    .container {
  display: flex;
  flex-wrap: wrap; /* 要素が収まりきらない場合、折り返す */
}

Flexboxの実際の使用例

以下に、Flexboxを使った簡単なレイアウトの例をいくつか示します。

1. 水平レイアウト

Flexboxのデフォルトの並び順は水平方向です。以下は、Flexboxを使ってアイテムを中央に配置する例です。

html
<div class="container">
  <div class="item">アイテム1div>
  <div class="item">アイテム2div>
  <div class="item">アイテム3div>
div>

css
.container {
  display: flex;
  justify-content: center; /* アイテムを中央揃え */
  align-items: center; /* アイテムを縦方向に中央揃え */
  height: 100vh; /* 高さをビュー全体に設定 */
}

.item {
  padding: 10px;
  background-color: lightblue;
  margin: 5px;
}

2. 縦並びのレイアウト

flex-direction: columnを使うと、アイテムを垂直方向に並べることができます。

html
<div class="container-vertical">
  <div class="item">アイテム1div>
  <div class="item">アイテム2div>
  <div class="item">アイテム3div>
div>

css
.container-vertical {
  display: flex;
  flex-direction: column; /* アイテムを縦方向に並べる */
  justify-content: center; /* アイテムを中央揃え */
  align-items: center;
  height: 100vh;
}

.item {
  padding: 10px;
  background-color: lightcoral;
  margin: 5px;
}

3. アイテム間にスペースを追加

justify-content: space-betweenを使うと、アイテム間に均等なスペースを追加することができます。

html
<div class="container-space">
  <div class="item">アイテム1div>
  <div class="item">アイテム2div>
  <div class="item">アイテム3div>
div>

css
.container-space {
  display: flex;
  justify-content: space-between; /* アイテム間に均等なスペース */
  align-items: center;
  height: 100vh;
}

.item {
  padding: 10px;
  background-color: lightgreen;
  margin: 5px;
}

Flexboxの応用

1. グリッドレイアウト

Flexboxを使って、複数のアイテムをグリッド状に並べることもできます。flex-wrapを使ってアイテムが折り返すように設定します。

html
<div class="grid-container">
  <div class="item">アイテム1div>
  <div class="item">アイテム2div>
  <div class="item">アイテム3div>
  <div class="item">アイテム4div>
  <div class="item">アイテム5div>
  <div class="item">アイテム6div>
div>

css
.grid-container {
  display: flex;
  flex-wrap: wrap; /* アイテムが折り返す */
}

.item {
  flex: 1 1 30%; /* アイテムが横幅の30%を取る */
  padding: 10px;
  background-color: lightyellow;
  margin: 5px;
}

2. フレックスアイテムのサイズ調整

flex-grow、flex-shrink、flex-basisを使うと、フレックスアイテムのサイズ調整が可能です。

  • flex-grow: アイテムが余分なスペースをどれだけ拡張するかを設定。

  • flex-shrink: アイテムがスペース不足時にどれだけ縮小するかを設定。

  • flex-basis: アイテムの初期サイズを指定。

css
.item {
  flex-grow: 1; /* 空きスペースを埋める */
  flex-shrink: 1; /* 収まりきらない場合に縮小 */
  flex-basis: 100px; /* 初期サイズは100px */
  padding: 10px;
  background-color: lightgray;
  margin: 5px;
}

結論

Flexboxは、現代のウェブデザインにおいて非常に強力で柔軟なレイアウト手法です。基本的なプロパティを理解し、適切に使うことで、レスポンシブで効率的なレイアウトを簡単に作成できます。特に、画面サイズに合わせたレイアウト調整や要素の整列を行う際に大いに役立つツールです。

最終更新： 22/04/2025
1 分の読み
Back to top button