SoyaBlog

これを見れば解決しそうや

HOME>CSS>align-contentについて解説
ブログ投稿日時：
ブログ更新日時：
align-contentについて解説

align-contentについて解説

  1. align-content とは
  2. align-content の指定方法
  3. 今回のまとめ
1.

align-content とは

align-content は子要素が複数行になった場合の垂直方向の揃えを指定するプロパティです。

2.

align-content の指定方法

align-content は子要素が複数行になった場合の垂直方向の揃えを指定するプロパティです。

しかし、flex-wrap: nowrap; が適応されている場合は子要素を折り返さないので、align-content は無効になります。

align-contentで使える値は下記の6つです。

stretch（初期値）… 親要素の高さに合わせて広げて配置

flex-start … 親要素の開始位置から上揃えで配置

flex-end … 親要素の終了位置から下揃えで配置

center … 中央揃え

space-between … 最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置

space-around … 上下端にある子要素も含め、均等に間隔をあけて配置

それではそれぞれの指定方法と表示を見ていきましょう。

align-content: stretch; の指定方法と表示

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>
.items {
　display: flex;
　align-content: stretch;
　flex-wrap: wrap;
　gap: 16px;
　height: 300px;
}

.item {
　width: calc((100% - 16px * 3) / 4);
　background-color: #ff0000;
　color: #fff;
}
HTMLとCSSの表示
1
2
3
4
5
6
7
8
9
10
11
12

上記のように align-content: stretch; を指定すると親要素の高さに合わせて広げて配置します。

align-content: flex-start; の指定方法と表示

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>
.items {
　display: flex;
　align-content: flex-start;
　flex-wrap: wrap;
　gap: 16px;
　height: 300px;
}

.item {
　width: calc((100% - 16px * 3) / 4);
　background-color: #ff0000;
　color: #fff;
}
HTMLとCSSの表示
1
2
3
4
5
6
7
8
9
10
11
12

上記のように align-content: flex-start; を指定すると親要素の開始位置から上揃えで配置します。

align-content: flex-end; の指定方法と表示

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>
.items {
　display: flex;
　align-content: flex-end;
　flex-wrap: wrap;
　gap: 16px;
　height: 300px;
}

.item {
　width: calc((100% - 16px * 3) / 4);
　background-color: #ff0000;
　color: #fff;
}
HTMLとCSSの表示
1
2
3
4
5
6
7
8
9
10
11
12

上記のように align-content: flex-end; を指定すると親要素の終了位置から下揃えで配置します。

align-content: center; の指定方法と表示

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>
.items {
　display: flex;
　align-content: center;
　flex-wrap: wrap;
　gap: 16px;
　height: 300px;
}

.item {
　width: calc((100% - 16px * 3) / 4);
　background-color: #ff0000;
　color: #fff;
}
HTMLとCSSの表示
1
2
3
4
5
6
7
8
9
10
11
12

上記のように align-content: center; を指定すると中央揃えで配置します。

align-content: space-between; の指定方法と表示

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>
.items {
　display: flex;
　align-content: space-between;
　flex-wrap: wrap;
　gap: 16px;
　height: 300px;
}

.item {
　width: calc((100% - 16px * 3) / 4);
　background-color: #ff0000;
　color: #fff;
}
HTMLとCSSの表示
1
2
3
4
5
6
7
8
9
10
11
12

上記のように align-content: space-between; を指定すると最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置します。

align-content: space-around; の指定方法と表示

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>
.items {
　display: flex;
　align-content: space-around;
　flex-wrap: wrap;
　gap: 16px;
　height: 300px;
}

.item {
　width: calc((100% - 16px * 3) / 4);
　background-color: #ff0000;
　color: #fff;
}
HTMLとCSSの表示
1
2
3
4
5
6
7
8
9
10
11
12

上記のように align-content: space-around; を指定すると上下端にある子要素も含め、均等に間隔をあけて配置します。

3.

今回のまとめ

この記事では align-content について解説しました。

align-content は子要素が複数行になった場合の垂直方向の揃えを指定するプロパティです。

flex-wrap: nowrap; が適応されている場合は子要素を折り返さず、align-content は無効になるので注意が必要です。

最後までお読みいただきありがとうございます。