CSS flexboxについて

###　CSS flex box について
CSSでflexboxを使用すると、要素を横並びや縦方向に並べることができる。
親要素に使用するとフレックスコンテナとなり、子要素はフレックスアイテムとなる。

###　横方向に並べる

display: flex;     /*デフォルトは　justify-content: flex-start;　となる。*/

    justify-content: flex-start;    /*左揃え*/
    justify-content: flex-end;      /*右揃え*/
    justify-content: center;        /*中央揃え*/
    justify-content: space-between; /*子要素同士の間に均等に間隔をあける*/
    justify-content: space-around;  /*周囲に均等に間隔をあける*/

###　垂直に並べる

display: flex;

    align-items: flex-start; /*上揃え*/
    align-items: flex-end;   /*下揃え*/
    align-items: center;     /*中央揃え*/
    align-items: baseline;   /*ベースラインを揃える*/
    align-items: stretch;    /*全ての要素の高さを揃える*/

行をそろえる(複数行)

display: flex;

    align-content: flex-start;    /*上揃え*/
    align-content: flex-end;      /*下揃え*/
    align-content: center;        /*中央揃え*/
    align-content: space-between; /*均等に間隔をあける*/
    align-content: space-around;  /*周囲に均等に間隔をあける*/
}