保存しておくと便利！CSS Flexboxでよく使用するコードがまとめられたCSSのスニペット集

サイト構築 -CSS

Post on:2018年8月10日

sponsorsr

ヘッダでロゴを左寄せにしたり、検索窓を右寄せにしたり、画像をページの中央に配置したり、ページ上のあらゆる要素を揃え整列させるFlexboxをベースにしたスタイルシートのスニペットを紹介します。

サイトやブログの全体で利用できるユーティリティのclassとして、保存しておくと便利なスニペット集です。

Speed up alignment in CSS with Flexbox utility classes
by CodyHouse

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

CSSで面倒なのは要素を整列させること
Flexbox以前
Flexboxで簡単に

CSSで面倒なのは要素を整列させること

CSSで面倒なのは、要素を整列させることでした。しかし、Flexboxが登場して、理にかなった方法で整列させることが可能になりました。この記事では、要素を整列させるために使用できるFlexboxをベースにしたCSSのスニペットを共有しようと思います。

元々は、近日公開予定の「Web Components」のために作成したものですが、グローバルのCSSとして利用できるので、一足先に公開します。

Web Components|CodyHouse

記事を飛ばして、最終的なSCSSファイルを見たい方はこちらをご覧ください。
SCSSファイル: flex-alignment_07.scss

このファイルを使用した動画のチュートリアルもあります。

Flexbox以前

Flexbox以前では、わたし達はCSSのトリックを使って要素を整列しなければなりませんでした。いくつか例を見てましょう。

例1

テキストを扱う場合は、子要素のline-heightを親要素のheightと同じ値にすることで、text-alignプロパティを利用することができます。

.parent {
  height: 200px;
  text-align: center;
  
  .child {
    line-height: 200px;
  }
}

.parent {

height: 200px;

text-align: center;

.child {

line-height: 200px;

}

このテクニックは、テキストが折り返されない限り機能します。
では、テキストが折り返されるパラグラフではどうなるでしょうか。子要素のサイズを強制的に設定すると、次の例になります。

例2

x軸上に既知の幅（ただし高さは不明）の要素を揃えようとする場合は、左右のmarginを「auto」にするだけです。

.child {
  width: 40%;
  max-width: 800px;
  margin: 0 auto; // 要素をx軸に揃えます。
}

.child {

width: 40%;

max-width: 800px;

margin: 0 auto; // 要素をx軸に揃えます。

}

同じ要素をxとyの両軸に揃えようとする場合は、position: absolute;とtransform()関数使ったテクニックが機能します。

.parent {  
  position: relative;
  
  .child {
    width: 40%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.parent {

position: relative;

.child {

width: 40%;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

上記のテクニックで私が経験した問題は、画面解像度が低いデバイスではぼやけてしまうことです。transform()関数で算出される値が整数でない値（例えば、要素の高さが奇数の場合）によって要素を変換する場合に発生します。ただし、Retinaディスプレイではこの問題は発生しません。

例3

要素を既知のサイズに整列させるのは、さらに難しくなります。
親要素にposition: relative;を指定し、calc()関数を使って水平方向と垂直方向に整列させる必要があります。

.parent {
  position: relative;
  
  .child {
    width: 200px;
    height: 200px;
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
  }
}

.parent {

position: relative;

.child {

width: 200px;

height: 200px;

position: absolute;

top: calc(50% - 100px);

left: calc(50% - 100px);

}

Flexboxで簡単に

これまでのテクニックを使って実装していた整列は、Flexboxの登場によりシンプルに実装できます。Flexboxで整列するためには、最初に親要素と子要素を明らかにしておきます。
参考: CSS Flexbox の各プロパティの使い方を詳しく解説

例えば、x軸とy軸の中心に要素を配置するには、justify-contentプロパティとalign-itemsプロパティを使用するだけです。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  
  .child {
    width: 40%;
  }
}

.parent {

display: flex;

justify-content: center;

align-items: center;

.child {

width: 40%;

}

justify-contentプロパティは、主軸（flex-directionプロパティで変更しなかった場合はx軸）に沿って要素を整列させるために使用されます。align-itemsプロパティはクロス軸に沿って要素を整列させます。

この記事の最初の目標である、要素を整列させるために使用できるスニペットに話を戻しましょう。上記でも触れたように、Flexboxで要素を整列するには、子要素を対象にします。Flexboxの素晴らしい点は、この子要素であるFlexアイテムに「auto」を指定すると自動的に自己整列するということです。

例えば、要素を中心に揃えるには、下記のスニペットを使用します。

.parent {
  display: flex;
  
  .child {
    margin: auto;
    align-self: center;
  }
}

.parent {

display: flex;

.child {

margin: auto;

align-self: center;

}

この場合、IEにはalign-selfが必要であることに注意してください。

要素を整列させるために使用できるグローバルの「create the _alignment.scss」は、下記のコードになります。

.flex {
    display: flex;

    .align-center {
        margin: auto;
        align-self: center;
    }
    
    .align-left {
        margin-right: auto;
        align-self: center;
    }
    
    .align-right {
        margin-left: auto;
        align-self: center;
    }
    
    .align-x-center {
        margin-right: auto;
        margin-left: auto;
    }
    
    .align-x-left {
        margin-right: auto;
    }
    
    .align-x-right {
        margin-left: auto;
    }
    
    .align-y-center {
        align-self: center;
    }
    
    .align-y-top {
        align-self: flex-start;
    }
    
    .align-y-bottom {
        align-self: flex-end;
    }
}