[CSS]Flex-boxで組むCSSレイアウトの基本の「き」

August 14, 2017Code

CSSレイアウトを組む際に、flex-boxを多様しまくっているので、その忘備録を。

対応環境

  • Chrome 29+
  • Firefox 28+
  • Internet Explorer 11+
  • Opera 17+
  • Safari 6.1+ (プレフィックス: -webkit-)
  • Android 4.4+
  • iOS 7.1+ (プレフィックス: -webkit-)

実装方法

最初に親要素のdisplay内に、flexを指示。
block要素の場合は、display: flex;。inline要素の場合はdisplay: inline-flex;です。


/* block要素の場合 */
.flex-container {
display: -webkit-flex;
display: flex;
}

/* inline要素の場合 */
.flex-container {
display: -webkit-inline-flex; 
display: inline-flex;
}

次に配列順序に関して。デフォルトでは、上から下へ、左から右へ要素を配しますが、この順序を変更することが可能です。


/*水平方向(左から右へ)*/
.flex-container {
-webkit-flex-direction: row;
flex-direction: row;
}
/*水平方向(右から左へ)*/
.flex-container {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
/*垂直方向(上から下へ)*/
.flex-container {
-webkit-flex-direction: column;
flex-direction: column;
}
/*垂直方向(下から上へ)*/
.flex-container {
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}

flex-boxでは、原則ブロック内に並列に要素を配置するので、複数行に渡って指示を与える場合は、別途指示を与える必要があります。


/*横一行に要素を納める*/
.flex-container {
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
/*複数行に跨り、上から下へ*/
.flex-container {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
/*複数行に跨り、下から上へ*/
.flex-container {
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
/*flex-flowを用いたショートハンド*/
.flex-container {
-webkit-flex-flow:  || ;
flex-flow:  || ;
}

行内の並列要素に対しての指示はjustify-contentを用いて指示を出します。


/*左寄せ*/
.flex-container {
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
/*右寄せ*/
.flex-container {
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
/*中心寄せ*/
.flex-container {
-webkit-justify-content: center;
justify-content: center;
}
/*等間隔配置(両端詰め)*/
.flex-container {
-webkit-justify-content: space-between;
justify-content: space-between;
}
/*等間隔配置(全ての要素)*/
.flex-container {
-webkit-justify-content: space-around;
justify-content: space-around;
}

列に対する指示はalign-itemsを用いて指示を出します。


/*高さを揃える*/
.flex-container {
-webkit-align-items: stretch;
align-items: stretch;
}
/*上寄せ*/
.flex-container {
-webkit-align-items: flex-start;
align-items: flex-start;
}
/*下寄せ*/
.flex-container {
-webkit-align-items: flex-end;
align-items: flex-end;
}
/*中心寄せ*/
.flex-container {
-webkit-align-items: center;
align-items: center;
}
/*ベースラインを指定して寄せる*/
.flex-container {
-webkit-align-items: baseline;
align-items: baseline;
}

複数行に渡って展開する要素の行に対する指示はalign-contentを用いて指示を出します。


/*「flexコンテナ」の高さに対して均等に並べる*/
.flex-container {
-webkit-align-content: stretch;
align-content: stretch;
}
/*「flexコンテナ」の始点に対して寄せる*/
.flex-container {
-webkit-align-content: flex-start;
align-content: flex-start;
}
/*「flexコンテナ」の終点に対して寄せる*/
.flex-container {
-webkit-align-content: flex-end;
align-content: flex-end;
}
/*「flexコンテナ」の中心に対して寄せる*/
.flex-container {
-webkit-align-content: center;
align-content: center;
}
/*「flexコンテナ」の高さに対して等間隔配置(両端詰め)*/
.flex-container {
-webkit-align-content: space-between;
align-content: space-between;
}
/*「flexコンテナ」の高さに対して等間隔配置(全ての要素)*/
.flex-container {
-webkit-align-content: space-around; 
align-content: space-around;
}

次に、親要素に内包される子要素に対する指示に関して。


/*orderを用いた順序指定*/
/*デフォルトは0(加算すると後ろへ、加減すると前へと順番が変わります。)*/
.flex-item {
-webkit-order: <integer>;
order: <integer>;
}

/*デフォルトは0(フリーポジティブスペース分の大きさを他の子要素に比べてどれだけ拡大するかを指定できます。)*/
.flex-item {
-webkit-flex-grow: <number>; /* Safari */
flex-grow: <number>;
}

/*デフォルトは0(フリーネガティブスペース分の大きさを他の子要素に比べてどれだけ縮小するかを指定できます。)*/
.flex-item {
-webkit-flex-shrink: <number>;
flex-shrink: <number>;
}

/*デフォルトはauto(メインとなる要素の幅と高さのプロパティを同じにします。)*/
.flex-item {
-webkit-flex-basis: auto | <width>;
flex-basis: auto | <width>;
}

/*左から「flex-grow」「flex-shrink」「flex-basis」の順*/
.flex-item {
-webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

以上です。flex-boxは現時点における最も簡易で強力なグリッド組を可能にするCSSだと思うのでよくよく頭に叩き込んでおきたいですね。