Flexプロパティの便利な活用方法

2023.09.17 flexプロパティの便利な使い方

はじめに

概要

今回は、実践でよく使用するFlexプロパティについて説明します。基本のことから応用まで詳しく掘り下げていきます。

目的

Flexのメリット
Flexの活用
orderプロパティ
align-items: stretchについて
まとめ

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

Flexのメリット

メリットを記述する上で、FlexとGridを比べてみました。

Flexbox（フレックスレイアウト）:

FlexboxはCSS3の一部として導入されました。
初期のFlexboxの仕様は、現在のものとは異なっていましたが、時間とともに改善・安定してきました。
Flexboxは主に1次元のレイアウトのためのものです（縦か横のいずれか1方向）。
既に多くのブラウザでサポートされています。IE10以降でも、プレフィックス付きでのサポートがあります（ただし、古い仕様に基づいているため注意が必要）。

CSS Grid（グリッドレイアウト）:

CSS Gridは、Flexboxより後に導入されました。
グリッドは2次元のレイアウトを目的としています（縦と横の両方向）。
最近のブラウザでは広くサポートされており、特に最新のブラウザでは非常に強力な機能を持っています。
ただし、古いブラウザでは完全にはサポートされていないか、部分的なサポートとなっています。

現在のメジャーなブラウザでは、両方のレイアウト技術が十分にサポートされています。それぞれの技術を選択する際には、ターゲットとするブラウザや実現したいデザイン、使用場面に応じて適切なものを選ぶとよいでしょう。

Flexの活用

優先して覚えたいプロパティ

justify-content:

このプロパティは、フレックスコンテナ内のアイテムを主軸（flex-direction で定義された方向）に沿ってどのように配置するかを定義します。
取り得る値には、flex-start, flex-end, center, space-between, space-around, space-evenly などがあります。

align-items:

このプロパティは、フレックスコンテナ内のアイテムを交差軸（flex-direction の逆方向）に沿ってどのように配置するかを定義します。
取り得る値には、flex-start, flex-end, center, baseline, stretch などがあります。

flex-direction:

このプロパティは、フレックスコンテナ内の主軸の方向を定義します。
row の値は、アイテムをテキストの方向と同じ方向（通常、左から右へ）に配置します。これがデフォルトの値です。
他の取り得る値には、row-reverse, column, column-reverse などがあります。

要素を中央に寄せる

HTML

<div class="flex-container">
  <div class="flex-item">中央に配置される要素</div>
</div>

CSS

.flex-container {
  display: flex;
  justify-content: center; /* 水平方向の中央揃え */
  align-items: center;     /* 垂直方向の中央揃え */
  height: 100vh;           /* ビューポートの高さを100%に設定して、要素を垂直方向に中央に配置するための背景として機能させます */
}

.flex-item {
  /* 必要に応じてスタイルを追加 */
}

フレックスアイテムを垂直方向に中央に配置する際の鍵は、heightの指定です。フレックスコンテナに明示的な高さを指定しない場合、アイテムは垂直方向に中央に配置されません。特に、親要素の高さをパーセンテージ（%）で指定する場合、その親要素の高さが明確に設定されている必要があります。

rowとcolumnについて

1. flex-direction: row（デフォルト）
この場合、アイテムは水平方向に配置されます。

HTML

<div class="flex-row-container">
  <div>アイテム 1</div>
  <div>アイテム 2</div>
  <div>アイテム 3</div>
</div>

CSS

.flex-row-container {
  display: flex;
  flex-direction: row; /* 実際には、これがデフォルトなので指定しなくてもよい */
}

2. flex-direction: column
この場合、アイテムは垂直方向に配置されます。

HTML

<div class="flex-column-container">
  <div>アイテム 1</div>
  <div>アイテム 2</div>
  <div>アイテム 3</div>
</div>

CSS

.flex-column-container {
  display: flex;
  flex-direction: column;
}

Flexboxにおいての基本的なポイントは、flex-directionのデフォルト値がrowであることです。アイテムを縦方向に並べたい場合は、flex-directionをcolumnに設定します。また、flex-directionがcolumnの場合、justify-contentとalign-itemsの動作が逆になる点も注意が必要です。

orderプロパティ

order は、フレックスボックス内のアイテムの表示順序を制御するためのプロパティです。このプロパティを使用すると、ソースコードの順序とは異なる順序でアイテムを表示することができます。

HTML

<body>
  <div id="global-container">
    <div id="container">
      <header></header>
      <div class="hero"></div><!-- /.hero -->
      <main>
        <div id="main-container">
          <div class="content-order">
            <div class="content-order__inner wrap py-[50px] flex flex-col gap-10">

              <div class="content__box flex flex-col items-center justify-between md:flex-row order-2">
                <div class="content-order__img md:w-[45%]">
                  <img src="https://picsum.photos/1000/500?random=3" alt="">
                </div><!-- /.content-order__img -->
                <div class="content__txt md:w-[45%]">
                  <p class="">
                    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                  </p>
                </div><!-- /.content__txt -->
              </div><!-- /.content__box -->

              <div class="content__box flex flex-col items-center justify-between md:flex-row">
                <div class="content-order__img md:w-[45%]">
                  <img src="https://picsum.photos/1000/500?random=3" alt="">
                </div><!-- /.content-order__img -->
                <div class="content__txt md:w-[45%]">
                  <p class="">
                    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                  </p>
                </div><!-- /.content__txt -->
              </div><!-- /.content__box -->

            </div><!-- /.content-order__inner -->
          </div><!-- /.content-order -->
        </div>
      </main>
      <footer></footer>
    </div>
  </div>
</body>

上記のコードを表示すると以下のようになります。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス

上記の画像にorder-2を設定すると、右側に移動します。HTMLを変更せずに要素の調整が可能になり、非常に便利です。

<div class="content-order__img md:w-[45%] order-2"<img decoding="async" src="https://picsum.photos/1000/500?random=3" alt=""></div>

align-items: stretchについて

align-itemsのデフォルトと値です。Flexboxのプロパティの一つで、フレックスアイテムの交差軸（cross axis）上での配置を制御します。stretch はその中の一つの値で、この値が指定された場合、フレックスアイテムはフレックスコンテナの高さ（または幅、flex-directionがcolumnの場合）に合わせて伸び縮みします。

まとめ