【初心者でもわかる】CSSのdisplay:flex(Flexbox)についてソースコード付きで詳しく解説

CSSのFlexbox（フレックスボックス）は、Webデザインにおいて要素を柔軟に配置するための強力なレイアウトモデルです。

Flexboxは、親要素内の子要素を自動的に配置することができ、これにより、複雑なレイアウトを簡単に実現できます。

以下では、Flexboxの基本的な概念と、いくつかの一般的な例を示します。

Flexboxの基本

Flexboxは、親要素（Flexコンテナ）に適用することができます。

Flexコンテナ内のすべての子要素（Flexアイテム）は、同じ方向に伸縮し、Flexコンテナ内に自動的に配置されます。

displayプロパティ

Flexboxを有効にするには、親要素にdisplayプロパティを設定する必要があります。displayプロパティには、以下の値があります。

• display: flex;: 親要素をFlexコンテナに設定します。
• display: inline-flex;: 親要素をインラインFlexコンテナに設定します。

/* Flexコンテナ */
.container {
  display: flex;
}

/* インラインFlexコンテナ */
.container-inline {
  display: inline-flex;
}

flex-directionプロパティ

flex-directionプロパティは、Flexコンテナ内のFlexアイテムの配置方向を指定します。

デフォルトでは、flex-directionはrow（水平方向）に設定されています。

• flex-direction: row;: Flexアイテムを水平方向に配置します。
• flex-direction: column;: Flexアイテムを垂直方向に配置します。
• flex-direction: row-reverse;: Flexアイテムを逆順に水平方向に配置します。
• flex-direction: column-reverse;: Flexアイテムを逆順に垂直方向に配置します。

/* 水平方向にFlexアイテムを配置 */
.container {
  display: flex;
  flex-direction: row;
}

/* 垂直方向にFlexアイテムを配置 */
.container-vertical {
  display: flex;
  flex-direction: column;
}

justify-contentプロパティ

justify-contentプロパティは、Flexアイテムの水平方向の配置を指定します。

デフォルトでは、justify-contentはflex-startに設定されています。

• justify-content: flex-start;: Flexアイテムを左端に配置します。
• justify-content: flex-end;: Flexアイテムを右端に配置します。
• justify-content: center;: Flexアイテムを中央に配置します。
• justify-content: space-between;: Flexアイテムを均等に配置し、Flexアイテムを均等に配置し、左右のアイテムはコンテナの両端に固定し、中央のアイテムは余白を最大限に使用して配置します。
• justify-content: space-around;: Flexアイテムを均等に配置し、アイテムの間に余白を設けます。

/* Flexアイテムを左端に配置 */
.container {
  display: flex;
  justify-content: flex-start;
}

/* Flexアイテムを中央に配置 */
.container-center {
  display: flex;
  justify-content: center;
}

/* Flexアイテムを均等に配置 */
.container-space {
  display: flex;
  justify-content: space-between;
}

align-itemsプロパティ

align-itemsプロパティは、Flexアイテムの垂直方向の配置を指定します。

デフォルトでは、align-itemsはstretchに設定されています。

• align-items: flex-start;: Flexアイテムを上端に配置します。
• align-items: flex-end;: Flexアイテムを下端に配置します。
• align-items: center;: Flexアイテムを中央に配置します。
• align-items: stretch;: Flexアイテムを親要素に合わせて伸縮します。

/* Flexアイテムを上端に配置 */
.container {
  display: flex;
  align-items: flex-start;
}

/* Flexアイテムを中央に配置 */
.container-center {
  display: flex;
  align-items: center;
}

/* Flexアイテムを親要素に合わせて伸縮 */
.container-stretch {
  display: flex;
  align-items: stretch;
}

flex-wrapプロパティ

flex-wrapプロパティは、Flexアイテムの折り返しを指定します。

デフォルトでは、flex-wrapはnowrap（折り返ししない）に設定されています。

• flex-wrap: nowrap;: Flexアイテムを折り返ししないで配置します。
• flex-wrap: wrap;: Flexアイテムを折り返しして配置します。

/* Flexアイテムを折り返ししないで配置 */
.container {
  display: flex;
  flex-wrap: nowrap;
}

/* Flexアイテムを折り返して配置 */
.container-wrap {
  display: flex;
  flex-wrap: wrap;
}

Flexboxの例

以下に、Flexboxを使用した一般的なレイアウト例を示します。

水平方向のナビゲーションバー

以下の例は、水平方向に配置されたナビゲーションバーを示しています。

<nav class="nav-bar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

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

垂直方向の中央揃え

以下の例は、垂直方向に中央揃えたレイアウトを示しています。

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.item {
  margin: 10px;
}

フレックスギャラリー

以下の例は、Flexboxを使用して作成されたギャラリーを示しています。

<div class="gallery">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
  <img src="img4.jpg">
</div>

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.gallery img {
  flex: 1 1 300px;
  margin: 10px;
}

Flexboxのまとめ

以上が、Flexboxの基本的なプロパティと、実際に使用したレイアウト例についての解説でした。

Flexboxは、要素を柔軟に配置するための非常に強力な方法であり、Webデザインにおいて非常に役立ちます。

しかし、Flexboxは多くのプロパティを持っているため、最初は複雑に感じるかもしれません。

練習と試行錯誤を繰り返し、Flexboxをマスターすることをお勧めします。