CSS3のflexboxを使ったサンプル その2

CSS3のflexboxを使ったサンプル。justify-content、align-items等。

横方向の配置を指定するサンプル

以下、横幅20%の要素を配置するサンプルです。

左寄せ

1
2
3
4

右寄せ

1
2
3
4

中央揃え

1
2
3
4

スペース(余白)が均等になるように配置

1
2
3
4

スペース(余白)を均等にし、両端も半分のサイズのスペースを配置

1
2
3
4

縦方向の配置を指定するサンプル

以下、異なる高さの要素を配置するサンプルです。

上寄せ

1
2
3
4

下寄せ

1
2
3
4

中央に揃え

1
2
3
4

縦、横が決められた要素の配置を指定するサンプル

以下、高さ60px、横幅80pxの要素の配置を 設定するサンプルです。

上寄せで配置

1
2
3
4
5
6
7
8

下寄せで配置

1
2
3
4
5
6
7
8

中央に配置

1
2
3
4
5
6
7
8

スペースが均等になるように配置

1
2
3
4
5
6
7
8

スペースを均等にし、両端も半分のサイズのスペースを配置

1
2
3
4
5
6
7
8

上寄せで配置 (逆方向に折り返す)

1
2
3
4
5
6
7
8

下寄せで配置 (逆方向に折り返す)

1
2
3
4
5
6
7
8