【CSS】フレキシブルボックス((flexible box)のFlexアイテム配置プロパティ ～ flexアイテムの配置方法(flex-direction)、flexアイテムの水平方向の整
列(justify-content)、flexアイテムの垂直方向の整列(align-items)

フレキシブルボックス(flexible box)作成にてflexコンテナ内のflexアイテムの様々な配置方法について紹介します。

主な配置関連プロパティとしてflex-direction、justify-content、align-itemsがあります。

flex-directionの指定

親要素のflexコンテナに置かれている子要素をどのように配置するか指定します。

flexコンテナの主軸の方向を設定することで、子要素のflexアイテムの方向が決まります。

[CSS]共通のFlexコンテナ

 .flex-container{
　　width:100%;
　　-webkit-display:flex;
　　display:flex;
　　padding-bottom:20px;
　　border:1px dotted #F60;
　　}

[CSS]　共通のFlexアイテム(A～D)

 .flex-items{
　　height:40px;
　　width:100px;
　　background-color:#999;
　　border:1px solid #FFF;
　　}

「flex-direction:row;」はテキスト子要素と同じ方向で、通常flexアイテムは左から右へ水平方向に配置されます。デフォルト値となります。

[CSS]　row

 .row{
　　-webkit-flex-direction:row;
　　flex-direction:row;
　　}

「flex-direction:row-revers;」はrow値の反対側に、flexアイテムは右から左へ水平方向に配置されます。

[CSS]　row-revers

 .row-revers{
　　-webkit-flex-direction:row-revers;
　　flex-direction:row-revers;
　　}

「flex-direction:row-column;」でflexアイテムは上から下へ垂直方向に配置されます。

[CSS]　column

 .column{
　　-webkit-flex-direction:column;
　　flex-direction:column;
　　}

「flex-direction:row-column-reverse;」はcolumn値の反対側に、flexアイテムを下から上へ垂直方向に配置させます。

[CSS]　column-reverse

 .column-reverse{
　　-webkit-flex-direction:column-reverse;
　　flex-direction:column-reverse;
　　}

justify-content(水平方向の整列)

[CSS]　共通のFlexコンテナ

 .flex-container{
　　width:100%;
　　-webkit-display:flex;
　　display:flex;
　　-webkit-flex-direction:row;
　　flex-direction:row;
　　padding-bottom:20px;
　　border:1px dotted #F60;
　　}

「justify-content:flex-start;」は子要素Flexアイテムを横配置の場合は「左揃え」、縦配置の場合は「上揃え」に始端から間隔なしに配置されます。

[CSS]　flex-start

 .flex-start｛
　　-webkit-justify-content: flex-start;
　　justify-content: flex-start;
　　}

「justify-content:flex-end;」はflex-start値の逆です。

Flexアイテムを横配置の場合は終端から間隔なしで「右揃え」、縦配置の場合は「下揃え」になります。

[CSS]　flex-end

 .flex-end｛
　　-webkit-justify-content: flex-end;
　　justify-content: flex-end;
　　}

「justify-content: center;」でFlexアイテムは上下中央寄せになります。

[CSS]　center

　　-webkit-justify-content: center;
　　justify-content: center;
　　}

「justify-content: space-between;」でFlexアイテムは均等に間隔を空けて配置されます。左右両端のflexアイテムの始端と終端には空間が入りません。

「flexアイテム」の横幅の合計が「flexコンテナ」の横幅より長い場合、この値は「flex-start」値と同一になります。

[CSS]　space-between

　　-webkit-justify-content: space-between;
　　justify-content: space-between;
　　}

「justify-content: space-around;」でflexアイテムは全てのアイテムは等間隔に配置されます。

space-betweenと同じく均等の間隔で配置されますが、左右両端のflexアイテムは外側に間隔の半分ほどの空間ができます。

「flexアイテム」の横幅の合計が「flexコンテナ」の横幅より長い場合、この値は「center」値と同様になります。

[CSS]　space-around

　　-webkit-justify-content: space-around;
　　justify-content: space-around;
　　}

align-items(垂直方向の整列)

「align-items: flex-start;」でflexアイテムはflexコンテナのクロス軸の始点(cross start、上揃え)に配置されます。

[CSS]　flex-start

 .flex-start｛
　　-webkit-align-items: flex-start;
　　align-items: flex-start;
　　}

「align-items: flex-end;」はflex-start値の逆です。flexアイテムはflexコンテナのクロス軸の終点(cross end、下揃え)に配置されます。

[CSS]　flex-end

 .flex-end｛
　　-webkit-align-items: flex-end;
　　align-items: flex-end;
　　}

「align-items: center;」はFlexアイテムを中央寄せに収納します。

[CSS]　center

 .center｛
　　-webkit-align-items: center;
　　align-items: center;
　　}

「align-items: stretch;」でFlexアイテムはFlexコンテナの高さまでいっぱいに広がります。

[CSS]　stretch

 .center｛
　　-webkit-align-items: stretch;
　　align-items: stretch;
　　}

「align-items: baseline;」でFlexアイテムはベースライン揃えで配置されます。

[CSS]　baseline

 .center｛
　　-webkit-align-items: baseline;
　　align-items: baseline;
　　}