css display flex の 使い方(中央寄せなど)

CSS3 Flexbox の各プロパティの使い方をわすれないようにしたメモです。

flexboxの使い方

ブロック要素に使用するには、親要素には以下のstyleを付加

.flex-container {
  display: -webkit-flex; /* Safari */
  display: flex;
}

インライン要素に使用するには、親要素には以下のstyleを付加

.flex-container {
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
}

flex-direction(方向,向き)

主軸の方向を設定することができます。

row(初期値)

左から右へ

.flex-container-row {
  -webkit-flex-direction: row; /* Safari */
  flex-direction:         row;
}
1
2
3
4

row-reverse

右から左へ

.flex-container-row-reverse {
  -webkit-flex-direction: row-reverse; /* Safari */
  flex-direction:         row-reverse;
}
1
2
3
4

column

上から下へ垂直方向

.flex-container-column {
  -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
}
1
2
3
4

column-reverse

下から上へ垂直方向

.flex-container-column-reverse {
  -webkit-flex-direction: column-reverse; /* Safari */
  flex-direction:         column-reverse;
}
1
2
3
4

align-items(縦方向の位置,上下中央)

垂直方向を設定することができます。

stretch(初期値)

親要素の高さを満たすように配置されます。

.flex-container-stretch {
  -webkit-align-items: stretch; /* Safari */
  align-items:         stretch;
}
1
2
3
4

flex-start

上部に配置

.flex-container-flex-start {
  -webkit-align-items: flex-start; /* Safari */
  align-items:         flex-start;
}
1
2
3
4

flex-end

下部に配置

.flex-container-flex-end {
  -webkit-align-items: flex-end; /* Safari */
  align-items:         flex-end;
}
1
2
3
4

center

上下中央に配置

.flex-container-center {
  -webkit-align-items: center; /* Safari */
  align-items:         center;
}
1
2
3
4

justify-content(アイテムをどこに集めるか,右寄せ,中央寄せ,左寄せ)

flex-start(初期値)

親要素の始端に向かって、互いに接するように集める

.flex-container-justify-flex-start {
  -webkit-justify-content: flex-start; /* Safari */
  justify-content:         flex-start;
}
1
2
3
4

center

親要素の中央で、互いに接するように集める

.flex-container-justify-center {
  -webkit-justify-content: center; /* Safari */
  justify-content:         center;
}
1
2
3
4

flex-end

親要素の終端に向かって、互いに接するように集める

.flex-container-justify-flex-end {
  -webkit-justify-content: flex-end; /* Safari */
  justify-content:         flex-end;
}
1
2
3
4

space-between

最初と最後のアイテムは親要素の端に寄せられながら、均等に配置されます。

.flex-container-justify-space-between {
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
}
1
2
3
4

space-around

最初と最後のアイテムのは、隣接するアイテム間の余白の半分に等しくなりながら、均等に配置されます

.flex-container-justify-space-around {
  -webkit-justify-content: space-around; /* Safari */
  justify-content:         space-around;
}
1
2
3
4

天地中央,上下中央

align-itemsとjustify-contentで、天地中央にすることも可能です。

/*centering vertically and horizontally*/
.flex-container-vertically-centered {
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-align-items: center; /* Safari */
  align-items:         center;
  -webkit-justify-content: center; /* Safari */
  justify-content:         center;
}
1
2
3
4

flex-wrap(アイテムの折り返し)

単一のラインを持つ場合においてはこのプロパティは効果がありません。また、これらのデモは、min-height: 320px;を設定しています。

nowrap(初期値)

単一ラインにレイアウトされ、flex コンテナからあふれ出す場合もあります。下のデモは、overflow-x: scrollを設定しています。

.flex-container-flex-wrap-nowrap {
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap:         nowrap;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

wrap

必要があれば、横複数行に配置され、左から右へ、上から下へ、の順番に配置されます。

.flex-container-flex-wrap-wrap {
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

wrap-reverse

必要があれば、横複数行に配置され、左から右へ、下から上へ、の順番に配置されます。

.flex-container-flex-wrap-reverse {
  -webkit-flex-wrap: wrap-reverse; /* Safari */
  flex-wrap:         wrap-reverse;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

align-content(複数のラインの縦位置)

単一のラインを持つ場合においてはこのプロパティは効果がありません。また、これらのデモは、flex-wrap: wrap; min-height: 320px;を設定しています。

stretch(初期値)

全体を占めるようにラインを拡張する

.flex-container-align-content-stretch {
  -webkit-align-content: stretch; /* Safari */
  align-content:         stretch;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

flex-start

起点からラインを詰める

.flex-container-align-content-flex-start {
  -webkit-align-content: flex-start; /* Safari */
  align-content:         flex-start;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

flex-end

終端にラインを詰める

.flex-container-align-content-flex-end {
  -webkit-align-content: flex-end; /* Safari */
  align-content:         flex-end;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

center

中央にラインを詰める

.flex-container-align-content-center {
  -webkit-align-content: center; /* Safari */
  align-content:         center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

space-between

全体に渡って分配する

.flex-container-align-content-space-between {
  -webkit-align-content: space-between; /* Safari */
  align-content:         space-between;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

space-around

隣接するライン間の余白が同じになるように、ラインが均等に配置される

.flex-container-align-content-space-around {
  -webkit-align-content: space-around; /* Safari */
  align-content:         space-around;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

子要素について

子要素にも、いくつかのプロパティーが用意されています。

flex-grow(初期値 0)
アイテムが 親コンテナ内のスペースをどれだけ占有するかを指定します。※負の値は無効。
flex-shrink(初期値 1)
親コンテナ内のアイテムが、残りのアイテムと比較してどのくらい縮まるかを指定します。
「0」に指定した場合は、オリジナルのサイズを維持する。※負の値は無効。
flex-basis(初期値 auto)
アイテムのサイズの初期値を設定
flex(初期値 0 1 auto)
「flex-grow」「flex-shrink」「flex-basis」のショートハンド
align-self(初期値 auto)
アイテムの垂直方向の位置を、親要素のプロパティーである、align-itemsの値を上書きして配置することができる。
order(初期値 0)
アイテムをレイアウトに使用する順序を指定します。
要素は、order の値の昇順に配置されます。
order の値が同じ要素は、ソースコード内で現れる順に配置されます。

子要素であるアイテムには、vertical-align、float および clear は効果がありません。
float を使用すると、その要素の display プロパティは block であると算定されます。

なおflexboxのブラウザのサポート状況は、以下です。

Can I use…(2017-06-07 更新)

参考サイト

CSS Flexible Box Layout – CSS | MDN

CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

同じカテゴリの前後の記事


  1. KATOON.NET
  2. WEB
  3. css display flex の 使い方(中央寄せなど)