Flexコンテナで指定する要素(Flexアイテム)の配置方法について説明します。

水平方向の配置 – justify-content

justify-contentプロパティを使用して、要素(Flexアイテム)の水平方向の配置位置や要素同士の間隔を指定します。

flex-start	要素を左添えにします。justify-contentプロパティを指定しない場合は、flex-startと同じ挙動になります。
flex-end	要素を右添えにします。
center	要素を中央添えにします。
space-between	左右端以外の要素同士の間隔を均等にします。
space-around	要素同士の間隔を均等にします。

justify-contentプロパティで指定できる値

左添え

HTML

<div class="flex-container start">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
</div>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  width: 100%;
  outline: solid red;
}

/* 左添え */
.start {
  justify-content: flex-start;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  background-color: aquamarine;
}

結果

item 1

item 2

item 3

右添え

HTML

<div class="flex-container end">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
</div>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  width: 100%;
  outline: solid red;
}

/* 右添え */
.end {
  justify-content: flex-end;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  background-color: aquamarine;
}

結果

item 1

item 2

item 3

中央添え

HTML

<div class="flex-container center">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
</div>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  width: 100%;
  outline: solid red;
}

/* 中央添え */
.center {
  justify-content: center;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  background-color: aquamarine;
}

結果

item 1

item 2

item 3

左右端以外均等間隔

HTML

<div class="flex-container space-between">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
</div>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  width: 100%;
  outline: solid red;
}

/* 左右端以外均等 */
.space-between {
  justify-content: space-between;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  background-color: aquamarine;
}

結果

item 1

item 2

item 3

均等間隔

HTML

<div class="flex-container space-around">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
</div>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  width: 100%;
  outline: solid red;
}

/* 均等 */
.space-around {
  justify-content: space-around;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  background-color: aquamarine;
}

結果

item 1

item 2

item 3

縦方向の配置 – align-items

align-itemsプロパティを使用して、要素(Flexアイテム)の縦方向の配置位置や要素の高さの大きさの揃えを指定します。

stretch	要素(Flexアイテム)の高さの揃えを指定します。要素(Flexアイテム)を親要素の高さ、または要素(Flexアイテム)の一番多い要素の高さに合わせます。 align-itemsプロパティを指定しない場合は、stretchと同じ挙動になります。
flex-start	上添えに配置します。
flex-end	下添えに配置します。
center	縦中央添えに配置します。
baseline	要素内のテキストのベースラインの位置を基準に要素を揃えます。

align-itemsプロパティで指定できる値

要素の高さ

HTML

/* 高さ揃え */
<div class="flex-container stretch">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
</div>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  height: 100px;
  width: 100%;
  outline: solid red;
}

/* 高さ揃え */
.stretch {
  align-items: stretch;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  width: 60px;
  background-color: aquamarine;
}

結果

item 1

item 2

item 3

上添え

HTML

/* 上揃え */
<div class="flex-container start">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
</div>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  height: 100px;
  width: 100%;
  outline: solid red;
}

/* 上揃え */
.start {
  align-items: flex-start;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  width: 60px;
  background-color: aquamarine;
}

結果

item 1

item 2

item 3

下添え

HTML

/* 下揃え */
<div class="flex-container end">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
</div>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  height: 100px;
  width: 100%;
  outline: solid red;
}

/* 下揃え */
.end {
  align-items: flex-end;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  width: 60px;
  background-color: aquamarine;
}

結果

item 1

item 2

item 3

中央添え

HTML

/* 中央揃え */
<div class="flex-container center">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
</div>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  height: 100px;
  width: 100%;
  outline: solid red;
}

/* 中央揃え */
.center {
  align-items: center;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  width: 60px;
  background-color: aquamarine;
}

結果

item 1

item 2

item 3

ベースライン

少し分かりにくいですが、要素(Flexアイテム)内のテキストのベースラインの位置が基準になります。動作確認の為、要素(Flexアイテム)内のテキストサイズを各々バラバラに指定し、それらの文字のベースラインに揃う事を確認します。

HTML

/* 文字ベースライン */
<div class="flex-container baseline">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
</div>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  height: 100px;
  width: 100%;
  outline: solid red;
}

/* 文字ベースライン */
.baseline {
  align-items: baseline;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  width: 85px;
  background-color: aquamarine;
}

/* 文字サイズ */
.flex-item:nth-child(1) {
  font-size: 1rem;
}

/* 文字サイズ */
.flex-item:nth-child(2) {
  font-size: 1.2rem;
}

/* 文字サイズ */
.flex-item:nth-child(3) {
  font-size: 1.5rem;
}

結果

item 1

item 2

item 3

行全体の配置 – align-content

行が複数行になった場合の要素の配置を指定します。

stretch	要素(Flexアイテム)の高さの揃えを指定します。親要素の高さに合わせます。 align-contentプロパティを指定しない場合は、stretchと同じ挙動になります。
flex-start	上添えに配置します。
flex-end	下添えに配置します。
center	縦中央添えに配置します。
space-between	左右端以外の要素同士の間隔を均等にします。
space-around	要素同士の間隔を均等にします。

align-contentプロパティで指定できる値

要素の高さ

HTML

/* 高さ揃え */
<div class="flex-container stretch">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
</div>

CSS

flex-wrapプロパティがnowrap(折り返しなし)の場合、align-contentプロパティが機能しないので、flex-wrapプロパティがwrap(折り返しあり)を指定しています。

/* Flexコンテナ */
.flex-container {
  display: flex;
  width: 150px;
  outline: solid red;
}

/* 高さ揃え */
.stretch {
  flex-wrap: wrap;
  align-content: stretch;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  width: 50px;
  background-color: aquamarine;
}

結果

item 1

item 2

item 3

item 4

item 5

item 6

上添え

HTML

/* 上揃え */
<div class="flex-container start">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
</div>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  width: 200px;
  height: 150px;
  outline: solid red;
}

/* 上添え */
.start {
  flex-wrap: wrap;
  align-content: flex-start;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  width: 50px;
  background-color: aquamarine;
}

結果

item 1

item 2

item 3

item 4

item 5

item 6

下添え

HTML

/* 下揃え */
<div class="flex-container end">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
</div>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  width: 200px;
  height: 150px;
  outline: solid red;
}

/* 下添え */
.end {
  flex-wrap: wrap;
  align-content: flex-end;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  width: 50px;
  background-color: aquamarine;
}

結果

item 1

item 2

item 3

item 4

item 5

item 6

中央添え

HTML

/* 中央揃え */
<div class="flex-container center">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
</div>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  width: 200px;
  height: 150px;
  outline: solid red;
}

/* 中央添え */
.center {
  flex-wrap: wrap;
  align-content: center;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  width: 50px;
  background-color: aquamarine;
}

結果

item 1

item 2

item 3

item 4

item 5

item 6

左右端以外均等間隔

HTML

/* 左右端以外均等間隔 */
<div class="flex-container space-between">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
  <div class="flex-item">item 7</div>
  <div class="flex-item">item 8</div>
  <div class="flex-item">item 9</div>
</div>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  width: 200px;
  height: 150px;
  outline: solid red;
}

/* 左右端以外均等間隔 */
.space-between {
  flex-wrap: wrap;
  align-content: space-between;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  width: 50px;
  background-color: aquamarine;
}

結果

item 1

item 2

item 3

item 4

item 5

item 6

item 7

item 8

item 9

均等間隔

HTML

/* 均等間隔 */
<div class="flex-container space-around">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
  <div class="flex-item">item 4</div>
  <div class="flex-item">item 5</div>
  <div class="flex-item">item 6</div>
  <div class="flex-item">item 7</div>
  <div class="flex-item">item 8</div>
  <div class="flex-item">item 9</div>
</div>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  width: 200px;
  height: 150px;
  outline: solid red;
}

/* 均等間隔 */
.space-around {
  flex-wrap: wrap;
  align-content: space-around;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  width: 50px;
  background-color: aquamarine;
}

結果

item 1

item 2

item 3

item 4

item 5

item 6

item 7

item 8

item 9