Flexboxで要素を揃える方法

CSSで要素を揃える技法の１つにFlexboxとGridがあります。
今回はその内のFlexboxについてを、備忘録として残しておきます。

はじめに

レイアウトを考える前に、まずは要素をどのように配置するかを考えると思います。
その際に、大きく別けて２種類の方向（水平と垂直）を考える必要があります。

ⅰ．水平方向に要素を配置したい場合

この場合、インラインと呼ばれるスタイル（CSS）を用いることで、簡易的に配置できるようになります。
つまり主軸に沿って、要素を配置（並べる）ことを前提とした時にインラインを利用します。
デフォルトでは左から右方向に配置されます。

ⅱ．垂直方向に要素を配置したい場合

この場合、ブロックと呼ばれるスタイル（CSS）を用いることで、簡易的に配置できるようになります。
つまり交差軸に沿って、要素を配置（並べる）ことを前提とした時にブロックを利用します。
デフォルトでは上から下方向に配置されます。

１．水平方向に要素を揃えて配置する方法

ⅰ．左寄せ

.flex-container {
    -webkit-justify-content: flex-start; /* Safari用 */
    justify-content: flex-start;
}

ⅱ．右寄せ

.flex-container {
    -webkit-justify-content: flex-end; /* Safari用 */
    justify-content: flex-end;
}

ⅲ．左右中央寄せ

.flex-container {
    -webkit-justify-content: center; /* Safari用 */
    justify-content: center;
}

ⅳ．等間隔配置

.flex-container {
    -webkit-justify-content: space-between; /* Safari用 */
    justify-content: space-between;
}

ⅴ．両端スペース＆等間隔配置

.flex-container {
    -webkit-justify-content: space-around; /* Safari用 */
    justify-content: space-around;
}

２．垂直方向に要素を揃えて配置する方法

ⅰ．上寄せ

.flex-container {
    -webkit-align-items: flex-start; /* Safari用 */
    align-items:         flex-start;
}

ⅱ．下寄せ

.flex-container {
    -webkit-align-items: flex-end; /* Safari用 */
    align-items:         flex-end;
}

ⅲ．上下中央寄せ

.flex-container {
    -webkit-align-items: center; /* Safari */
    align-items:         center;
}

ⅳ．コンテナの高さいっぱいに配置

.flex-container {
    -webkit-align-items: stretch; /* Safari */
    align-items:         stretch;
}

ⅴ．baselineに配置

.flex-container {
    -webkit-align-items: baseline; /* Safari */
    align-items:         baseline;
}

高さ20px

高さ40px

高さ35px

CSSも次から次へと便利なクラス等が追加されたり改善されているので、アップデート情報には目を光らせておかないといけないなと改めて感じました。
以上、ありがとうございました！

コメント