CSSの基礎：フレックスボックス

Posted on by

フレックスボックス（Flexbox）は、CSSのレイアウトモジュールであり、
要素の配置と整列を柔軟かつ効率的に行うために使用されます。
フレックスボックスを使用することで、複雑なレイアウトを簡単に作成できます。
ここでは、フレックスボックスの基本と主要なプロパティについて詳しく説明します。

フレックスコンテナとフレックスアイテム

フレックスコンテナ

フレックスボックスを使用するには、まず親要素に display: flex; を指定して、
フレックスコンテナにします。
フレックスコンテナの直下の子要素がフレックスアイテムになります。

例)

css

.container {
    display: flex;
}

HTML

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

フレックスアイテム

フレックスコンテナの直下の子要素がフレックスアイテムになります。
フレックスアイテムは、フレックスコンテナ内で自動的に配置されます。

主軸と交差軸

フレックスボックスのレイアウトは、主軸（main axis）と交差軸（cross axis）に基づいています。
主軸はフレックスアイテムが配置される方向で、交差軸はその直角方向です。

  • 主軸：デフォルトでは水平方向（左から右）。
  • 交差軸：デフォルトでは垂直方向（上から下）。

主なフレックスボックスプロパティ

flex-direction

flex-direction プロパティは、主軸の方向を指定します。
主軸の方向を変更することで、フレックスアイテムの並び順を変更できます。

値

  • row（デフォルト）：左から右の水平方向。
  • row-reverse：右から左の水平方向。
  • column：上から下の垂直方向。
  • column-reverse：下から上の垂直方向。

例

.container {
    display: flex;
    flex-direction: row; /* または row-reverse, column, column-reverse */
}

justify-content

justify-content プロパティは、主軸に沿ったフレックスアイテムの整列方法を指定します。
フレックスアイテムの間のスペース配分を制御します。

値

  • flex-start（デフォルト）：主軸の開始位置に揃える。
  • flex-end：主軸の終了位置に揃える。
  • center：主軸の中央に揃える。
  • space-between：アイテム間に均等なスペースを配置し、両端は揃える。
  • space-around：アイテムの周囲に均等なスペースを配置する。
  • space-evenly：アイテム間のスペースを均等に配置する。

例

.container {
    display: flex;
    justify-content: center; /* または flex-start, flex-end, space-between, space-around, space-evenly */
}

align-items

align-items プロパティは、交差軸に沿ったフレックスアイテムの整列方法を指定します。
フレックスアイテムの高さを揃えます。

値

  • stretch（デフォルト）：フレックスコンテナの高さに引き伸ばす。
  • flex-start：交差軸の開始位置に揃える。
  • flex-end：交差軸の終了位置に揃える。
  • center：交差軸の中央に揃える。
  • baseline：テキストのベースラインに揃える。

例

.container {
    display: flex;
    align-items: center; /* または flex-start, flex-end, stretch, baseline */
}

flex-wrap

flex-wrap プロパティは、
フレックスアイテムがコンテナ内に収まらない場合の折り返し方法を指定します。

値

  • nowrap（デフォルト）：折り返さない。
  • wrap：折り返して複数行に配置する。
  • wrap-reverse：折り返して逆方向に配置する。

例

.container {
    display: flex;
    flex-wrap: wrap; /* または nowrap, wrap-reverse */
}

align-content

align-content プロパティは、複数行のフレックスアイテムの間のスペース配分を指定します。
フレックスコンテナの交差軸に沿ってスペースを制御します。

値

  • stretch（デフォルト）：フレックスコンテナの高さに引き伸ばす。
  • flex-start：交差軸の開始位置に揃える。
  • flex-end：交差軸の終了位置に揃える。
  • center：交差軸の中央に揃える。
  • space-between：アイテム間に均等なスペースを配置し、両端は揃える。
  • space-around：アイテムの周囲に均等なスペースを配置する。
  • space-evenly：アイテム間のスペースを均等に配置する。

例

.container {
    display: flex;
    align-content: space-between; /* または flex-start, flex-end, center, space-around, space-evenly */
}

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

order

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

.item {
    order: 1; /* デフォルトは0、値が小さいほど前に表示される */
}

flex-grow

flex-grow プロパティは、フレックスアイテムがフレックスコンテナ内の
空きスペースをどの程度拡大するかを指定します。
デフォルト値は0です。

.item {
    flex-grow: 1; /* フレックスコンテナ内の空きスペースを均等に拡大 */
}

flex-shrink

flex-shrink プロパティは、フレックスアイテムがフレックスコンテナ内の
スペース不足に応じてどの程度縮小するかを指定します。
デフォルト値は1です。

.item {
    flex-shrink: 0; /* フレックスアイテムを縮小しない */
}

flex-basis

flex-basis プロパティは、フレックスアイテムの初期サイズを指定します。
デフォルト値はautoです。

.item {
    flex-basis: 200px; /* フレックスアイテムの初期サイズを200pxに設定 */
}

flex

flex プロパティは、flex-grow、flex-shrink、flex-basis を
一括で指定できる短縮プロパティです。

.item {
    flex: 1 1 200px; /* flex-grow, flex-shrink, flex-basis をまとめて設定 */
}

まとめ

フレックスボックスは、複雑なレイアウトを簡単に実現できる
強力なCSSレイアウトモジュールです。
display: flex; を使用してフレックスコンテナを作成し、
flex-direction、justify-content、align-items などのプロパティを使用して
フレックスアイテムを整列させることができます。
これらのプロパティを適切に使用することで、柔軟でレスポンシブなデザインを作成できます。