概要

CSSのflex（フレックスボックス）プロパティは、要素の配置や整列を柔軟に制御するためのレイアウト手法です。従来のfloatやpositionに比べ、複雑なレイアウトでも簡単に扱えることから、レスポンシブデザインで非常に重宝されています。この記事では、flexプロパティの基本的な使い方から応用テクニックまで詳しく解説します。

基本構文

flexを使うためには、親要素にdisplay: flex;を指定し、フレックスボックスコンテナにします。この設定により、子要素がフレックスボックスのルールに従って配置されるようになります。

.container {
  display: flex;
}

このシンプルな設定で、コンテナ内の子要素は横並びになり、フレックスボックスの基本動作が有効になります。

フレックスボックスの基本プロパティ

display: flex

display: flex;は親要素に指定し、子要素をフレックスアイテムとして扱います。これにより、アイテムの配置が一列に整列され、フローが水平になります。

.flex-container {
  display: flex;
}

flex-direction

flex-directionプロパティは、フレックスアイテムの並び方を設定します。主な値は以下の通りです：

• row: デフォルト値。子要素を水平方向に並べます。
• row-reverse: 子要素を水平方向に反転して並べます。
• column: 子要素を垂直方向に並べます。
• column-reverse: 子要素を垂直方向に反転して並べます。

.row-example {
  display: flex;
  flex-direction: row; /* 水平方向に並べる */
}
.column-example {
  display: flex;
  flex-direction: column; /* 垂直方向に並べる */
}

justify-content

justify-contentは、メイン軸（flex-directionの方向）に沿ったアイテムの配置を制御します。主な値は次の通りです：

• flex-start: 左寄せまたは上寄せ。
• flex-end: 右寄せまたは下寄せ。
• center: 中央揃え。
• space-between: 両端にアイテムを配置し、間を均等に空けます。
• space-around: アイテム間に均等なスペースを持たせ、外側にも少しスペースを配置します。

.center-example {
  display: flex;
  justify-content: center; /* 中央揃え */
}
.space-between-example {
  display: flex;
  justify-content: space-between; /* 両端に配置 */
}

align-items

align-itemsは、クロス軸（メイン軸と直交する方向）に沿ったアイテムの整列を制御します。主な値は以下の通りです：

• flex-start: クロス軸の開始位置に揃えます。
• flex-end: クロス軸の終了位置に揃えます。
• center: クロス軸の中央に揃えます。
• baseline: テキストのベースラインに揃えます。
• stretch: アイテムをコンテナの高さに合わせて伸ばします。

.align-center-example {
  display: flex;
  align-items: center; /* クロス軸の中央に揃える */
}
.stretch-example {
  display: flex;
  align-items: stretch; /* アイテムを伸ばす */
}

flex-wrap

flex-wrapは、アイテムがコンテナのサイズを超えたときに折り返すかどうかを制御します。

• nowrap: デフォルト値。折り返さずに一列に並べます。
• wrap: コンテナのサイズを超えた場合に折り返します。
• wrap-reverse: 折り返し方向を反転させます。

.wrap-example {
  display: flex;
  flex-wrap: wrap; /* 折り返して表示 */
}

応用例

レスポンシブなグリッドレイアウト

フレックスボックスを使うと、レスポンシブなグリッドレイアウトも簡単に実装できます。

.grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* アイテム間のスペース */
}
.grid-item {
  flex: 1 1 calc(33.333% - 10px); /* 幅を自動調整 */
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

ナビゲーションバーの作成

フレックスボックスを使ったナビゲーションバーの例です。

.navbar {
  display: flex;
  justify-content: space-between;
  background-color: #333;
  padding: 10px;
}
.nav-item {
  color: white;
  padding: 10px 15px;
  text-decoration: none;
}
.nav-item:hover {
  background-color: #575757;
}

フレックスボックスでセンタリング

フレックスボックスは、要素を中央に配置するのに最適です。

.centering-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* ビューポート全体の高さ */
}
.center-item {
  background-color: #2196F3;
  color: white;
  padding: 20px;
}

flexの使いどころ

フレックスボックスは、単純なレイアウトから複雑なレイアウトまで、様々な場面で使用することができます。以下にいくつかの使いどころを挙げます。

• レスポンシブレイアウト: サイズに応じてアイテムの位置やサイズを柔軟に変更できます。
• センタリング: 縦横両方のセンタリングが簡単にできます。
• スペースの均等配置: ナビゲーションやメニューのアイテムを均等に配置するのに最適です。

まとめ

CSSのflexは、レイアウトの調整を非常に簡単にする強力なツールです。従来の方法では難しかったレスポンシブなレイアウトやセンタリングが、flexを使うことで簡単に実現できます。基本の使い方を理解し、様々なプロパティと組み合わせることで、柔軟で美しいウェブデザインを作成しましょう。