こんにちは～！アメリカ・シリコンバレー在住のSeikaです😊

今回はCSSのレイアウト「flexbox（フレックスボックス）」についてまとめました。

(2023年8月3日公開)

1、Flexboxとは？

Webページを作る際、さまざまな要素（文字や画像など）をどのように配置するかはとても重要です。
それを解決するための強力なツールが、CSSの「Flexbox（フレックスボックス）」です。

教室にあるたくさんの机をイメージしてみてください、
それぞれの机は、Webページ上の「箱」や「コンテナ」のようなものです。
そして、それぞれの机の上には本やノート、筆箱などさまざまなアイテムが置かれています。
これらのアイテムをどのように配置するかによって、机の上の見た目や使いやすさが大きく変わります。

Flexboxはまさに、これと同じことをWebページ上で行うためのツールで、Webページ上の「箱（コンテナ）」とその中の「アイテム」の配置を自由自在に制御することができます。
そして、Flexboxを使う際に重要なのが、「メイン軸」と「クロス軸」の二つの概念です。

• メイン軸（Main Axis）
  Flexboxの中で、アイテムが並ぶ基本的な方向を指します。
  これは机の長さ方向のようなもので、アイテムがどのように並ぶかを決めます。
  

• クロス軸（Cross Axis）
  メイン軸に対して直角に交わる方向を指します。
  これは机の幅方向のようなもので、アイテムがどのようにスタック（積み重ね）されるかを決めます。

2、Flexboxのプロパティ

Flexboxで使う主なプロパティ5つを紹介します🌟

セレクタ { 
プロパティ: 値; 
}

1,display

display プロパティは、要素をフレックスコンテナ（Flex Container）にするためのものです。
値に flex や inline-flex を指定します。

flex
要素をフレックスコンテナにし、子要素（Flex Items）をブロックレベルで配置します。通常、前後に改行を持ち、全幅を占有します。

inline-flex
要素をフレックスコンテナにし、子要素をインラインレベルで配置します。

2,flex-direction

flex-direction プロパティは、要素の主要な軸（メイン軸）を定義するためのものです。
値にrow, row-reverse, column, column-reverse を指定できます。

row
メイン軸を左から右へと設定します（デフォルト）

row-reverse
メイン軸を右から左へと設定します。

column
メイン軸を上から下へと設定します。

column-reverse
メイン軸を下から上へと設定します。

3, justify-content

justify-content プロパティは、メイン軸沿いのアイテムの配置を決定します。

flex-start
アイテムはコンテナの開始側（左端または上端）に配置されます。

flex-end
アイテムはコンテナの終了側（右端または下端）に配置されます。

center
アイテムはコンテナの中央に配置されます。

space-between
アイテム間の空間は等しくなりますが、最初と最後のアイテムとコンテナの間には空間がありません。

space-around
アイテム間の空間は等しくなりますが、最初と最後のアイテムとコンテナの間にも空間があります。ただし、この空間はアイテム間の空間の半分の大きさです。

space-evenly
アイテムは均等に配置され、すべてのアイテム間の空間（最初と最後のアイテムとコンテナの間の空間も含む）が等しくなります。

4,align-items

align-items プロパティは、クロス軸沿いのアイテムの配置を決定します。

flex-start
アイテムはコンテナの上部（または左部）に揃えられます。

flex-end
アイテムはコンテナの下部（または右部）に揃えられます。

center
アイテムはコンテナの中央に揃えられます。

baseline
アイテムはそのテキストのベースラインに沿って揃えられます。
ベースラインとは、文字が書かれる線のことです。
主にテキストが異なるフォントサイズの時に有用です。

stretch
アイテムはコンテナの高さ（または幅）に合わせて伸ばされます。
これにより、すべてのアイテムがコンテナを完全に埋めるようになります。

5,flex-wrap

flex-wrap プロパティは、アイテムを一行に収まるようにするか、
複数行にまたがるようにするかを決定します。

nowrap
デフォルト値。
これが設定されていると、フレックスアイテムは一行に強制的に詰め込まれます。
その結果、必要に応じてアイテムが縮小しても、すべてのアイテムは一行に保たれます。

wrap
この値が設定されていると、フレックスアイテムは複数行にまたがることができます。
新しい行はコンテナの下部に追加されます。

wrap-reverse
これは wrap と同様に動作しますが、新しい行がコンテナの上部に追加されます。

今回はCSSのflexboxをまとめてみました。

今回使用したHTMLとCSSはGit hubにありますので、コードが気になる方は見てみてください！

今回は以上です。
次の記事でお会いしましょう～！

Follow me here😊
Youtube│Instagram│Twitter│Dribbble│Linkedin│Behance│Notion│Portfolio│Figma │質問箱