HCJmemory

Flexboxによるレイアウト

CSSによるレイアウト手法のうち、Flexboxを用いた方法を紹介します。

目次

  1. 準備
  2. flexアイテムを並べる向き
  3. flexアイテムの折り返し
  4. flexアイテムの揃え位置
  5. flexアイテムの並び順
  6. flexアイテムごとの配置位置
  7. 参考

準備

まず、親要素にdisplay: flex;を指定します。

CSS
.flexContainer {
  display: flex;
}

これでFlexboxが使えるようになります。

このとき、display: flex;を指定した要素を「flexコンテナ」、その子要素を「flexアイテム」と呼びます。

目次へ

flexアイテムを並べる向き

flex-directionプロパティは、flexコンテナの主軸方向を指定するときに使います。これを使うことで、flexアイテムの配置方向を指定できます。

  • row
    デフォルト値です。左から右に配置します。
  • row-reverse
    rowの逆方向、右から左に配置します。
  • column
    上から下に配置します。
  • column-reverse
    columnの逆方向、下から上に配置します。
CSS
.flexContainer {
  flex-direction: row;
}
flex-direction: row;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  flex-direction: row-reverse;
}
flex-direction: row-reverse;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  flex-direction: column;
}
flex-direction: column;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  flex-direction: column-reverse;
}
flex-direction: column-reverse;
1
2
3
4
5
6
7
8
目次へ

flexアイテムの折り返し

flex-wrapプロパティは、flexアイテムの折り返し方法を指定するときに使います。

  • nowrap
    デフォルト値です。折り返しません。
  • wrap
    左から右、上から下に折り返します。
  • wrap-reverse
    左から右、下から上に折り返します。
CSS
.flexContainer {
  flex-wrap: nowrap;
}
flex-wrap: nowrap;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  flex-wrap: wrap;
}
flex-wrap: wrap;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  flex-wrap: wrap-reverse;
}
flex-wrap: wrap-reverse;
1
2
3
4
5
6
7
8
目次へ

flexアイテムの揃え位置

justify-contentプロパティは、flexコンテナの主軸方向に沿って、flexアイテムの配置方法を指定します。
主軸方向は、flex-directionプロパティの値によって決まります(デフォルト値では左から右の横方向)。

  • flex-start
    デフォルト値です。先頭に寄せます。
  • flex-end
    後ろに寄せます。
  • center
    中央に寄せます。
  • space-between
    flexアイテム同士の間に間隔を空けます。
  • space-around
    flexアイテムの両端に間隔を空けます。
CSS
.flexContainer {
  justify-content: flex-start;
}
justify-content: flex-start;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  justify-content: flex-end;
}
justify-content: flex-end;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  justify-content: center;
}
justify-content: center;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  justify-content: space-between;
}
justify-content: space-between;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  justify-content: space-around;
}
justify-content: space-around;
1
2
3
4
5
6
7
8

align-contentプロパティは、flexコンテナの主軸方向に交差する方向に、flexアイテムの配置方法を指定します。
主軸方向は、flex-directionプロパティの値によって決まります(デフォルト値では左から右の横方向)。

なお、このプロパティはflexアイテムが複数行のときのみ効果があります。flexアイテムが一行のときは動きません。

  • stretch
    デフォルト値です。flexアイテムをコンテナの高さ(もしくは幅)いっぱいに配置します。
  • flex-start
    先頭に寄せます。
  • flex-end
    後ろに寄せます。
  • center
    中央に寄せます。
  • space-between
    flexアイテム同士の間に間隔を空けます。
  • space-around
    flexアイテムの両端に間隔を空けます。
CSS
.flexContainer {
  align-content: stretch;
}
align-content: stretch;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  align-content: flex-start;
}
align-content: flex-start;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  align-content: flex-end;
}
align-content: flex-end;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  align-content: center;
}
align-content: center;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  align-content: space-between;
}
align-content: space-between;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  align-content: space-around;
}
align-content: space-around;
1
2
3
4
5
6
7
8

align-itemsプロパティは、flexコンテナの主軸方向に交差する方向に、flexアイテムのデフォルトの配置方法を指定します。具体的には、そのflexコンテナ内のすべてのflexアイテムのalign-selfプロパティの値を指定します。
主軸方向は、flex-directionプロパティの値によって決まります(デフォルト値では左から右の横方向)。

  • stretch
    デフォルト値です。flexアイテムをコンテナの高さ(もしくは幅)いっぱいに配置します。
  • flex-start
    先頭に寄せます。
  • flex-end
    後ろに寄せます。
  • center
    中央に寄せます。
  • baseline
    flexアイテムのベースラインを合わせて配置します。
CSS
.flexContainer {
  align-items: stretch;
}
align-items: stretch;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  align-items: flex-start;
}
align-items: flex-start;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  align-items: flex-end;
}
align-items: flex-end;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  align-items: center;
}
align-items: center;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  align-items: baseline;
}
align-items: baseline;
1
2
3
4
5
6
7
8
目次へ

flexアイテムの並び順

orderプロパティは、flexアイテムの並び順をflexアイテムごとに指定します。flexアイテムは、このプロパティの値の昇順に並びます。

  • 0
    デフォルト値です。
  • <任意の整数値>
    正の値、負の値、0のいずれかを指定します。
CSS
.flexItem1 {
  order: 3;
}
.flexItem2 {
  order: 1;
}
.flexItem3 {
  order: 4;
}
.flexItem4 {
  order: -2;
}
.flexItem5 {
  order: 0;
}
.flexItem6 {
  order: -4;
}
.flexItem7 {
  order: 8;
}
.flexItem8 {
  order: 0;
}
align-items: baseline;
1
2
3
4
5
6
7
8
目次へ

flexアイテムごとの配置位置

align-selfプロパティは、align-itemsプロパティの値を上書きして、そのflexアイテムの配置方法を指定します。

  • auto
    デフォルト値です。そのflexアイテムの親のalign-itemsプロパティの値に従って配置されます。
  • stretch
    flexアイテムをコンテナの高さ(もしくは幅)いっぱいに配置します。
  • flex-start
    先頭に寄せます。
  • flex-end
    後ろに寄せます。
  • center
    中央に寄せます。
  • baseline
    flexアイテムのベースラインを合わせて配置します。
CSS
.flexContainer {
  align-items: stretch;
}
.flexItem4 {
  align-self: auto;
}
align-self: auto;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  align-items: stretch;
}
.flexItem4 {
  align-self: stretch;
}
align-self: stretch;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  align-items: stretch;
}
.flexItem4 {
  align-self: flex-start;
}
align-self: flex-start;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  align-items: stretch;
}
.flexItem4 {
  align-self: flex-end;
}
align-self: flex-end;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  align-items: stretch;
}
.flexItem4 {
  align-self: center;
}
align-self: center;
1
2
3
4
5
6
7
8
CSS
.flexContainer {
  align-items: stretch;
}
.flexItem4 {
  align-self: baseline;
}
align-self: baseline;
1
2
3
4
5
6
7
8
目次へ

参考

目次へ
カテゴリTips
タグ