【CSS】Flexboxレイアウトの基本と実践ガイド

Flexbox（フレックスボックス）は、CSSでレイアウトを組むための強力なツールで、複雑なレイアウトを簡単に作成するためのプロパティ群を提供します。特に、コンテンツの配置や整列を柔軟に制御できるため、レスポンシブデザインにも適しています。

この記事では、Flexboxの基本的な概念と主要なプロパティを解説し、効率的にレイアウトを作成する方法を紹介します。

1. Flexboxとは？

Flexboxは、「フレキシブルボックス」の略で、要素（アイテム）を並べたり、配置したりするためのレイアウトモデルです。従来のボックスモデル（blockやinline）よりも、要素同士の整列やサイズ調整が簡単にでき、特に動的なレイアウトに最適です。

Flexboxを使うことで、要素を横並びや縦並びにしたり、アイテム間の余白を自動的に調整したりすることができます。また、親要素とその子要素の間の関係を柔軟に設定できるため、特にレスポンシブデザインに役立ちます。

2. 基本の使い方

Flexboxを利用するには、親要素（コンテナ）にdisplay: flexまたはdisplay: inline-flexを指定します。これによって、その子要素（アイテム）が自動的にFlexboxアイテムとして扱われます。

.container {
  display: flex; /* 親要素にflexを適用 */
}

3. 主なFlexboxプロパティ

Flexboxには、アイテムの配置や並べ方を決定するためのいくつかの重要なプロパティがあります。

1. flex-direction

flex-directionは、アイテムの並べ方の方向を設定します。これにより、アイテムを横並びまたは縦並びにできます。

• row: デフォルト値。アイテムを水平方向（左から右）に並べます。
• row-reverse: アイテムを水平方向で逆順に並べます（右から左）。
• column: アイテムを垂直方向（上から下）に並べます。
• column-reverse: アイテムを垂直方向で逆順に並べます（下から上）。

.container {
  display: flex;
  flex-direction: column-reverse; /* アイテムを下から上に並べる */
}

2. justify-content

justify-contentは、アイテムを親要素内で水平方向にどのように配置するかを決定します。

• flex-start: 左揃え（デフォルト）。
• flex-end: 右揃え。
• center: 中央揃え。
• space-between: アイテム間に均等なスペースを配置。
• space-around: アイテムの前後に均等なスペースを配置。

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

3. align-items

align-itemsは、アイテムを親要素内で縦方向にどのように配置するかを決定します。

• flex-start: 上揃え。
• flex-end: 下揃え。
• center: 中央揃え。
• stretch: デフォルト値、アイテムが親要素の高さに合わせて引き伸ばされる。

.container {
  display: flex;
  align-items: center; /* アイテムを縦方向で中央揃え */
}

4. align-self

align-selfは、個別のアイテムに対して、align-itemsの設定をオーバーライドし、縦方向の配置を変更できます。特定のアイテムだけ配置を調整したい場合に便利です。

.item {
  align-self: flex-end; /* このアイテムだけ下揃え */
}

5. flex-wrap

flex-wrapは、アイテムが親要素の幅を超えた場合に、折り返すかどうかを決定します。

• nowrap: アイテムが折り返されず、横並びで表示される（デフォルト）。
• wrap: アイテムが折り返され、次の行に配置される。
• wrap-reverse: アイテムが逆順で折り返される。

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

6. flex-grow, flex-shrink, flex-basis

これらのプロパティは、Flexアイテムのサイズの変更を制御します。

• flex-grow: アイテムが空間をどれだけ占有するかを決定します。例えば、flex-grow: 1にすると、利用可能な空間を均等に分けます。
• flex-shrink: アイテムが縮小する際の比率を決定します。
• flex-basis: アイテムの基準となるサイズを指定します。

cssコピーする編集する.item {
  flex-grow: 1; /* アイテムが利用可能な空間を均等に占有 */
}

7. order

orderは、Flexアイテムの表示順序を変更するために使用します。デフォルト値は0で、数値を変更することで順番を入れ替えることができます。

.item {
  order: 2; /* 順番を2番目に */
}

4. Flexboxの実用例

1. 水平方向にアイテムを並べる

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

2. 縦方向にアイテムを並べる

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

3. レスポンシブなレイアウト

Flexboxはレスポンシブデザインにも最適です。flex-wrapやflex-basis、media queriesを組み合わせて、画面サイズに応じてアイテムのレイアウトを変更できます。

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

.item {
  flex: 1 1 30%; /* アイテムは30%の幅 */
}

@media (max-width: 600px) {
  .item {
    flex: 1 1 100%; /* スマホ表示ではアイテムが100%の幅に */
  }
}

5. まとめ

• Flexboxを使用すると、複雑なレイアウトでも簡単にアイテムを配置、整列、サイズ変更することができます。
• 主要なプロパティとして、flex-direction, justify-content, align-items, flex-wrapなどがあります。これらを組み合わせることで、柔軟で効率的なレイアウトが可能になります。
• レスポンシブデザインを考慮する際にも、Flexboxは非常に有効なツールです。

Flexboxを活用することで、従来のレイアウト方法に比べて、より簡潔で柔軟なデザインが可能になります。