SoyaBlog

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

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

Flexboxについて解説

  1. Flexboxについて
  2. flexについて (子要素の横並び)
  3. flex-directionについて (子要素の並ぶ向き)
  4. flex-wrapについて (子要素の折り返し)
  5. flex-flowについて (flex-directionとflex-wrapをまとめて指定)
  6. justify-contentについて (水平方向の揃え)
  7. align-itemsについて (垂直方向の揃え)
  8. align-contentについて (複数行にした時の揃え)
  9. orderについて (順序の指定)
  10. flex-growについて (子要素の伸びる比率)
  11. flex-shrinkについて (子要素の縮む比率)
  12. flex-basisについて (子要素のベースとなる幅の指定)
  13. flexについて (flex-grow、flex-shrink、flex-basisをまとめて指定)
  14. align-selfについて (子要素の垂直方向の揃え)
  15. 今回のまとめ
1.

Flexboxについて

Flexboxとは「Flexible Box Layout Module」の略で、その名の通りフレキシブルで簡単にレイアウトを組むことができるボックスです。

WEBサイトをコーディングする際には必ずと言っていいほどFlexboxは出てくるのでこの記事でマスターしていただければと思います。

2.

flexについて (子要素の横並び)

flexを使うと子要素を横並びにすることができます。

それではflexを指定する時としない時ではどうなるのかを見ていきましょう。

まずはflexを指定しない時のHTMLとCSSです。

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
.items {
　display: block;
}

.item {
　width: 100%;
　height: 50px;
　background-color: #ff0000;
　color: #fff;
}

.item:not(:first-child) {
　margin-top: 16px;
}
HTMLとCSSの表示
　
1
2
3
4

全体を囲んでいたitemsクラスにはflexを指定していません。

そのため、ブロック要素は縦並びになります。

次にflexを指定する時のHTMLとCSSです。

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
.items {
　display: flex;
　gap: 16px;
}

.item {
　width: calc((100% - 16px * 3) / 4);
　height: 50px;
　background-color: #ff0000;
　color: #fff;
}
HTMLとCSSの表示
1
2
3
4

今回は全体を囲んでいたitemsクラスにflexを指定します。

そのため、要素は横並びになります。

3.

flex-directionについて (子要素の並ぶ向き)

flex-directionは子要素の並ぶ向きを指定するプロパティです。

flex-direction で使える値は下記の4つです。

row（初期値）… 子要素を左から右に配置

row-reverse … 子要素を右から左に配置

column … 子要素を上から下に配置

column-reverse … 子要素を下から上に配置

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

flex-direction: row; の指定方法と表示

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
.items {
　display: flex;
　flex-direction: row;
　gap: 16px;
}

.item {
　width: calc((100% - 16px * 3) / 4);
　height: 50px;
　background-color: #ff0000;
　color: #fff;
}
HTMLとCSSの表示
1
2
3
4

上記のように flex-direction: row; を指定すると子要素が左から右に配置されます。

flex-direction: row-reverse; の指定方法と表示

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
.items {
　display: flex;
　flex-direction: row-reverse;
　gap: 16px;
}

.item {
　width: calc((100% - 16px * 3) / 4);
　height: 50px;
　background-color: #ff0000;
　color: #fff;
}
HTMLとCSSの表示
1
2
3
4

上記のように flex-direction: row-reverse; を指定すると子要素が右から左に配置されます。

flex-direction: column; の指定方法と表示

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
.items {
　display: flex;
　flex-direction: column;
　gap: 16px;
}

.item {
　width: calc((100% - 16px * 3) / 4);
　height: 50px;
　background-color: #ff0000;
　color: #fff;
}
HTMLとCSSの表示
1
2
3
4

上記のように flex-direction: column; を指定すると子要素が上から下に配置されます。

flex-direction: column-reverse; の指定方法と表示

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
.items {
　display: flex;
　flex-direction: column-reverse;
　gap: 16px;
}

.item {
　width: calc((100% - 16px * 3) / 4);
　height: 50px;
　background-color: #ff0000;
　color: #fff;
}
HTMLとCSSの表示
1
2
3
4

上記のように flex-direction: column; を指定すると子要素が下から上に配置されます。

4.

flex-wrapについて (子要素の折り返し)

flex-wrapは子要素の折り返しを指定するプロパティです。

flex-wrapで使える値は下記の3つです。

nowrap（初期値）… 子要素を折り返さず、1行に並べる

wrap … 子要素を折り返し、複数行に上から下へ並べる

wrap-reverse … 子要素を折り返し、複数行に下から上へ並べる

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

flex-wrap: nowrap; の指定方法と表示

<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>
.items {
　display: flex;
　flex-wrap: nowrap;
　gap: 16px;
}

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

上記のように flex-wrap: nowrap; を指定すると子要素は折り返さず、1行に並べます。

flex-wrap: wrap; の指定方法と表示

<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>
.items {
　display: flex;
　flex-wrap: wrap;
　gap: 16px;
}

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

上記のように flex-wrap: wrap; を指定すると子要素を折り返し、要素を上から下に並べます。

flex-wrap: wrap-reverse; の指定方法と表示

<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>
.items {
　display: flex;
　flex-wrap: wrap-reverse;
　gap: 16px;
}

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

上記のように flex-wrap: wrap-reverse; を指定すると子要素を折り返し、要素を下から上に並べます。

5.

flex-flow について (flex-direction と flex-wrap をまとめて指定)

flex-flow は flex-direction と flex-wrap をまとめて指定できるプロパティです。

それでは指定方法を見ていきましょう。

.items {
　display: flex;
　flex-flow: row wrap;
}

上記のように flex-flow を使うときは

flex-flow: flex-direction flex-wrap;

で指定するようにしましょう。

※初期値は flex-flow: row nowrap; になっています。

6.

justify-content について (水平方向の揃え)

justify-content は親要素に空きスペースがあった場合、子要素を水平方向のどの位置に配置するかを指定するプロパティです。

flex-directionで使える値は下記の5つです。

flex-start（初期値）… 左揃え

flex-end … 右揃え

center … 中央揃え

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

space-around … 全ての子要素の間隔を均等にあけて配置

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

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

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.items {
　display: flex;
　flex-direction: flex-start;
　gap: 16px;
}

.item {
　width: 20%;
　height: 50px;
　background-color: #ff0000;
　color: #fff;
}
HTMLとCSSの表示
1
2
3

上記のように flex-direction: flex-start; を指定すると子要素を左寄せで配置します。

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

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.items {
　display: flex;
　flex-direction: flex-end;
　gap: 16px;
}

.item {
　width: 20%;
　height: 50px;
　background-color: #ff0000;
　color: #fff;
}
HTMLとCSSの表示
1
2
3

上記のように flex-direction: flex-end; を指定すると子要素を右寄せで配置します。

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

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.items {
　display: flex;
　flex-direction: center;
　gap: 16px;
}

.item {
　width: 20%;
　height: 50px;
　background-color: #ff0000;
　color: #fff;
}
HTMLとCSSの表示
1
2
3

上記のように flex-direction: center; を指定すると子要素を中央揃えで配置します。

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

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.items {
　display: flex;
　justify-content: space-between;
　gap: 16px;
}

.item {
　width: 20%;
　height: 50px;
　background-color: #ff0000;
　color: #fff;
}
HTMLとCSSの表示
1
2
3

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

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

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.items {
　display: flex;
　justify-content: space-around;
　gap: 16px;
}

.item {
　width: 20%;
　height: 50px;
　background-color: #ff0000;
　color: #fff;
}
HTMLとCSSの表示
1
2
3

上記のように justify-content: space-around; を指定すると全ての子要素の間隔を均等にあけて配置します。

7.

align-itemsについて (垂直方向の揃え)

align-items は親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定するプロパティです。

align-items で使える値は下記の5つです。

stretch（初期値）… 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置

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

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

center … 中央揃え

baseline … ベースラインで揃える

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

align-items: 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>
.items {
　display: flex;
　align-items: stretch;
　gap: 16px;
　height: 200px;
}

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

上記のように align-items: stretch; を指定すると親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置します。

align-items: 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>
.items {
　display: flex;
　align-items: flex-start;
　gap: 16px;
　height: 200px;
}

.item {
　width: calc((100% - 16px * 4) / 5);
　height: 50px;
　background-color: #ff0000;
　color: #fff;
}
HTMLとCSSの表示
1
2
3
4
5

上記のように align-items: flex-start; を指定すると親要素の開始位置に合わせて上揃えに配置します。

align-items: 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>
.items {
　display: flex;
　align-items: flex-end;
　gap: 16px;
　height: 200px;
}

.item {
　width: calc((100% - 16px * 4) / 5);
　height: 50px;
　background-color: #ff0000;
　color: #fff;
}
HTMLとCSSの表示
1
2
3
4
5

上記のように align-items: flex-end; を指定すると親要素の終了位置に合わせて下揃えに配置します。

align-items: 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>
.items {
　display: flex;
　align-items: center;
　gap: 16px;
　height: 200px;
}

.item {
　width: calc((100% - 16px * 4) / 5);
　height: 50px;
　background-color: #ff0000;
　color: #fff;
}
HTMLとCSSの表示
1
2
3
4
5

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

align-items: baseline; の指定方法と表示

<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>
.items {
　display: flex;
　align-items: baseline;
　gap: 16px;
}

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

上記のように align-items: baseline; を指定するとベースライン(それぞれの文字の最下部を基準)で揃えて配置します。

8.

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; を指定すると上下端にある子要素も含め、均等に間隔をあけて配置します。

9.

orderについて (順序の指定)

order はフレックスアイテムを任意の順番に並び替えるプロパティです。

それでは指定方法を見ていきましょう。

<div class="items">
  <div class="item item--04">4</div>
  <div class="item item--01">1</div>
  <div class="item item--05">5</div>
  <div class="item item--02">2</div>
  <div class="item item--03">3</div>
</div>
.items {
　display: flex;
　gap: 16px;
}

.item {
　width: calc((100% - 16px * 4) / 5);
　background-color: #ff0000;
　color: #fff;
}

.item--01 {
　order: 1;
}

.item--02 {
　order: 2;
}

.item--03 {
　order: 3;
}

.item--04 {
　order: 4;
}

.item--05 {
　order: 5;
}
HTMLとCSSの表示
1
2
3
4
5

上記のように order を指定すると番号の小さい順から優先に並んでいきます。

10.

flex-growについて (子要素の伸びる比率)

flex-grow は親要素に余ったスペースがあった場合、指定のある子要素が他の子要素に対してどれくらい伸びるかを指定するプロパティです。

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

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.items {
　display: flex;
　gap: 16px;
}

.item {
　color: #fff;
　height: 50px;
}

.item:nth-child(1) {
　flex-grow: 1;
　background-color: #ff0000;
}

.item:nth-child(2) {
　flex-grow: 2;
　background-color: #00ff00;
}

.item:nth-child(3) {
　flex-grow: 3;
　background-color: #0000ff;
}
HTMLとCSSの表示
1
2
3

上記のようにflex-growを赤に1、緑に2、青に3を指定しているので、その割合に応じて領域が決まりました。

今回はflex-growの合計値が6なので、flex-grow: 3; を指定している青の部分は全体の50%の領域を確保しました。

11.

flex-shrinkについて (子要素の縮む比率)

flex-shrink は flex-grow と逆で、親要素に余ったスペースがなくすべての子要素が入り切らない場合、指定のある子要素が他の子要素に対してどれくらい縮むかを指定するプロパティです。

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

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
</div>
.items {
　display: flex;
　gap: 16px;
}

.item {
　width: 100%;
　height: 50px;
　color: #fff;
}

.item:nth-child(1) {
　flex-shrink: 2;
　background-color: #ff0000;
}

.item:nth-child(2) {
　flex-shrink: 3;
　background-color: #0000ff;
}
HTMLとCSSの表示
1
2

上記のように子要素の横幅が100%ずつになっているので合計で200%になり、親要素をはみ出しているので flex-shrink が適用されます。flex-shrink を赤に2、青に3を指定しているので、その割合に応じてはみ出た部分の領域を縮めました。

今回は flex-shrink の合計値が5なので、赤は40%分が縮まり、青は60%分が縮まりました。

12.

flex-basisについて (子要素のベースとなる幅の指定)

flex-basisは子要素に対し width や height と同じように幅や高さの値を指定するプロパティです。

flexアイテムの並び方によって幅や高さ、どちらの値をとるか切り替わる性質を持ちます。

それでは指定方法を見ていきましょう。

/* 初期値 */
.item-01 {
　flex-basis: auto;
}

/* 「数値 + 単位」の指定 */
.item-02 {
　flex-basis: 200px;
}

/* 「％」の指定 */
.item-03 {
　flex-basis: 30%;
}

上記のようにflex-basisでは、autoや「数値 + 単位」、「％」の3つの方法で横幅を指定することができます。

また、1つだけ覚えておきたいのが flex-basis は width や heigth よりも優先されて適用されるので覚えておくとよいかもしれません。

13.

flexについて (flex-grow、flex-shrink、flex-basisをまとめて指定)

flex は flex-grow と flex-shrink、flex-basis をまとめて指定できるプロパティです。

それでは指定方法を見ていきましょう。

.item {
　flex: 0 1 300px;
}

上記のようにflex-flowを使うときは

flex: flex-grow flex-shrink flex-basis;

で指定するようにしましょう。

※初期値は flex: 0 1 auto; になっています。

14.

align-self について (子要素の垂直方向の揃え)

align-self は親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定できるプロパティです。

こちらは align-items と全く同じ機能ですが、align-items は親要素に対して指定し、align-self は子要素に対して指定するものなので、それぞれを使い分けれるようにしましょう。

また、align-items と align-self を同時に指定した場合は子要素に指定する align-self が優先して適用されます。

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

auto（初期値）… 親要素の align-items の値を継承

stretch … 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置

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

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

center … 中央揃え

baseline … ベースラインで揃える

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

align-self: auto; の指定方法と表示

<div class="items">
  <div class="item">1</div>
  <div class="item align-self">2</div>
  <div class="item">3</div>
</div>
.items {
　display: flex;
　align-items: flex-start;
　gap: 16px;
　height: 200px;
}

.item {
　width: calc((100% - 16px * 2) / 3);
　height: 100%;
　background-color: #ff0000;
　color: #fff;
}

.align-self {
　align-self: auto;
　height: 50px;
}
HTMLとCSSの表示
1
2
3

上記のように align-self: auto; を指定すると親要素の align-items の値を継承します。

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

<div class="items">
  <div class="item">1</div>
  <div class="item align-self">2</div>
  <div class="item">3</div>
</div>
.items {
　display: flex;
　gap: 16px;
　height: 200px;
}

.item {
　width: calc((100% - 16px * 2) / 3);
　height: 100%;
　background-color: #ff0000;
　color: #fff;
}

.align-self {
　align-self: stretch;
　height: auto;
}
HTMLとCSSの表示
1
2
3

上記のように align-items: stretch; を指定すると親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置します。

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

<div class="items">
  <div class="item">1</div>
  <div class="item align-self">2</div>
  <div class="item">3</div>
</div>
.items {
　display: flex;
　gap: 16px;
　height: 200px;
}

.item {
　width: calc((100% - 16px * 2) / 3);
　height: 100%;
　background-color: #ff0000;
　color: #fff;
}

.align-self {
　align-self: flex-start;
　height: 50px;
}
HTMLとCSSの表示
1
2
3

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

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

<div class="items">
  <div class="item">1</div>
  <div class="item align-self">2</div>
  <div class="item">3</div>
</div>
.items {
　display: flex;
　gap: 16px;
　height: 200px;
}

.item {
　width: calc((100% - 16px * 2) / 3);
　height: 100%;
　background-color: #ff0000;
　color: #fff;
}

.align-self {
　align-self: flex-end;
　height: 50px;
}
HTMLとCSSの表示
1
2
3

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

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

<div class="items">
  <div class="item">1</div>
  <div class="item align-self">2</div>
  <div class="item">3</div>
</div>
.items {
　display: flex;
　gap: 16px;
　height: 200px;
}

.item {
　width: calc((100% - 16px * 2) / 3);
　height: 100%;
　background-color: #ff0000;
　color: #fff;
}

.align-self {
　align-self: center;
　height: 50px;
}
HTMLとCSSの表示
1
2
3

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

align-self: baseline; の指定方法と表示

<div class="items">
  <div class="item">1</div>
  <div class="item align-self">2</div>
  <div class="item">3</div>
</div>
.items {
　display: flex;
　gap: 16px;
　height: 200px;
}

.item {
　width: calc((100% - 16px * 2) / 3);
　height: 100%;
　background-color: #ff0000;
　color: #fff;
}

.align-self {
　align-self: baseline;
　height: 50px;
}
HTMLとCSSの表示
1
2
3

上記のように align-self: baseline; を指定するとベースライン(それぞれの文字の最下部を基準)で揃えて配置します。

15.

今回のまとめ

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

FlexboxはWEBサイトをコーディングする際には必ずと言っていいほど出てくるので、忘れそうな方はこの記事をブクマしていただけると嬉しいです。

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