• Home
  • Web制作
  • 【初心者向け】CSSフレックスボックス完全攻略ガイド

【初心者向け】CSSフレックスボックス完全攻略ガイド

schedule update
Tags: HTML

CSSフレックスボックスとは？

WebサイトやWebアプリケーションのデザインにおいて、要素の配置は非常に重要です。これまで、要素の配置にはfloatやpositionプロパティがよく用いられてきました。しかし、これらの手法は複雑で、思い通りのレイアウトを実現するのが難しい場合もありました。

そこで登場したのが CSSフレックスボックス です。フレックスボックスは、要素を柔軟に、そして直感的に配置するためのレイアウトモジュールです。従来の手法に比べて、よりシンプルで柔軟なレイアウトを簡単に実現できます。

この記事では、フレックスボックスの基本的な使い方から、実践的なテクニックまでを図解を交えてわかりやすく解説します。フレックスボックスをマスターして、思い通りのWebページを作成しましょう！

フレックスボックスの基本

フレックスボックスを利用するには、親要素にdisplay: flex;を指定します。これにより、親要素は フレックスコンテナ となり、その子要素はフレックスアイテムとして扱われます。

.flex-container {
  display: flex;
}

フレックスコンテナには、アイテムの配置方向、整列方法、アイテムのサイズなどを制御するための様々なプロパティがあります。

主軸と交差軸

フレックスボックスでは、要素の配置方向を決める 主軸 と、主軸に垂直な 交差軸 という概念があります。デフォルトでは、主軸は水平方向、交差軸は垂直方向に設定されています。

flex-directionプロパティ

flex-directionプロパティを使うことで、主軸の方向を変更できます。

  • row：主軸を水平方向に設定（デフォルト）
  • row-reverse：主軸を水平方向に設定し、アイテムの順序を反転
  • column：主軸を垂直方向に設定
  • column-reverse：主軸を垂直方向に設定し、アイテムの順序を反転

justify-contentプロパティ

justify-contentプロパティは、主軸方向におけるアイテムの整列方法を指定します。

  • flex-start：アイテムを始点に寄せて配置（デフォルト）
  • flex-end：アイテムを終点に寄せて配置
  • center：アイテムを中心に配置
  • space-between：アイテムの間の間隔を均等に配置
  • space-around：アイテムの前後にも均等な間隔を空けて配置

align-itemsプロパティ

align-itemsプロパティは、交差軸方向におけるアイテムの整列方法を指定します。

  • flex-start：アイテムを始点に寄せて配置
  • flex-end：アイテムを終点に寄せて配置
  • center：アイテムを中心に合わせて配置
  • stretch：アイテムをコンテナの高さに合わせて伸縮させる（デフォルト）
  • baseline：アイテムのベースラインに合わせて配置

フレックスアイテムのプロパティ

フレックスアイテムにも、自身のサイズや順序を制御するためのプロパティがあります。

flex-growプロパティ

flex-growプロパティは、アイテムがどれだけ伸長できるかを数値で指定します。デフォルト値は0で、この場合、アイテムは余ったスペースを埋めるために伸長しません。

flex-shrinkプロパティ

flex-shrinkプロパティは、アイテムがどれだけ縮小できるかを数値で指定します。デフォルト値は1で、この場合、アイテムはコンテナ内に収まるように縮小します。

flex-basisプロパティ

flex-basisプロパティは、アイテムの初期サイズを指定します。単位はpx、em、%などを使用できます。

orderプロパティ

orderプロパティは、アイテムの表示順序を指定します。数値が小さいほど、先に表示されます。デフォルト値は0です。

実践的なフレックスボックスの活用例

フレックスボックスは、様々なレイアウトを実現するために活用できます。

  • ヘッダーやフッターの作成: ロゴ、ナビゲーションメニュー、検索バーなどを、フレックスボックスを使って綺麗に配置できます。
  • カードレイアウト: 商品一覧やブログ記事などを、レスポンシブなカードレイアウトで表示できます。
  • フォームの作成: 入力フィールドやボタンなどを、フレックスボックスを使って整然と配置できます。

まとめ

フレックスボックスは、Webページのレイアウトを柔軟に制御するための強力なツールです。基本的な使い方を理解すれば、様々なレイアウトを簡単に実現できます。ぜひ、フレックスボックスを活用して、魅力的なWebページを作成してみてください！

関連記事