CSSのflex【現役エンジニアが解説】

PROGRAM

今回は、CSSのflexについて、flexの基本と水平方向や垂直方向の並べ方に分け、簡単に解説していきます。

flexの基本

要素の並べ方を設定する際に苦労された経験がある方は多いと思います。

CSSでは親要素のdisplayプロパティの値をflexにすることで子要素の並べ方を簡単に設定できます。

div.hoge{display:flex;}

上記のコードでは、hogeというクラスを持つdiv要素(親要素)のdisplayプロパティの値をflexにしています。

水平(横)方向の並べ方

displayプロパティの値をflexにしただけでは子要素は水平方向で左揃えとなります。

水平方向の並べ方を変えるには、親要素のjustify-contentプロパティの値をcenter等に変更します。

div.hoge{display:flex;justify-content:center;}

上記のコードでは、hogeというクラスを持つdiv要素の中の子要素を水平方向に中央揃えで並べて表示させています。

垂直(上下)方向の並べ方

displayプロパティの値のflexの設定だけでは子要素は垂直方向に伸縮された状態となります。

垂直方向の並べ方を変更するためには、親要素のalign-itemsプロパティの値をcenter等に設定します。

div.hoge{display:flex;align-items:center;}

上記のコードでは、hogeというクラスを持つdiv要素の中の子要素を垂直方向に中央揃えの配置の仕方で表示させています。