| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {align-items: 値 } |
| 値 の形式 | flex-start，flex-end，center，baseline，stretch |
| 初 期 値 | stretch |
| 対応ブラウザー | C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+ |
| 適用可能な要素 | フレキシブル・コンテナ |
| 継 承 | しない |
align-items プロパティ は，フレキシブル・コンテナ内の行内の子要素（flex items）の 副軸（cross-axis）方向の配置方法 の既定値を指定します。
この設定は，親要素であるフレキシブル・コンテナ側で子要素の配置方法を設定するものですが，子要素で align-self プロパティ を指定することにより上書きできます。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| flex-start | 子要素（flex items）の 副開始端（cross-start） を行ボックスの 副開始端 に揃えます。 |
| flex-end | 子要素の 副終了端（cross-end） を行ボックスの 副終了端 に揃えます。 |
| center | 子要素の 余白ボックス（margin box）を行ボックスの 副軸（cross axis） 方向の中央に揃えます。 行ボックスの 副軸 方向のサイズが子要素のそれより小さい場合には，両方向に同じだけはみ出します。 |
| baseline | 子要素のインライン軸が 副軸 に等しい場合は，この値は flex-start を指定した場合と同じとなります。 それ以外の場合は，baseline alignment の指定にしたがって，すべての行内の子要素のベースラインを揃えた上，そのベースラインから 副開始端 までのサイズが最も大きな要素をコンテナの 副開始端 に揃えます。 |
| stretch | 子要素の 副軸方向サイズ（cross size） プロパティの値が auto の場合は， min-width, max-width, min-height, max-height などのプロパティの指定による制約を守った上で，その 副軸方向サイズ を行ボックスの 副軸方向サイズ に最も近い値にします。 |
なお，フレキシブル・コンテナと行ボックスの配置に関しては，多数の用語 が定義され，用いられておりますので，これらについての知識は必須です。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" >
<!--
div.fwrapp {
width: 600px;
height: 120px;
margin: 10px;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
background-color: #f0f0f0;
}
div.fwrapp div {
width: 100px;
color: #ffffff;
font-size: 25px;
text-align: center;
padding-top: 10px;
}
div.aitems1 { align-items: flex-start; }
div.aitems2 { align-items: flex-end; }
div.aitems3 { align-items: center; }
div.aitems4 { align-items: baseline; }
div.aitems5 { align-items: stretch; }
.height1 { height: 35px; background-color: green; }
.height2 { height: 45px; background-color: maroon; }
.height3 { height: 55px; background-color: blue; }
.height4 { height: 65px; background-color: red; }
.height5 { height: 75px; background-color: black; }
.height6 { height: 85px; background-color: olive; }
-->
</style> |
| HTML <body> ～ </body> |
<div class="fwrapp aitems1"> <div class="height1">1</div><div class="height2">2</div> <div class="height3">3</div><div class="height4">4</div> <div class="height5">5</div><div class="height6">6</div> </div> <div class="fwrapp aitems2"> <div class="height1">1</div><div class="height2">2</div> <div class="height3">3</div><div class="height4">4</div> <div class="height5">5</div><div class="height6">6</div> </div> <div class="fwrapp aitems3"> <div class="height1">1</div><div class="height2">2</div> <div class="height3">3</div><div class="height4">4</div> <div class="height5">5</div><div class="height6">6</div> </div> <div class="fwrapp aitems4"> <div class="height1">1</div><div class="height2">2</div> <div class="height3">3</div><div class="height4">4</div> <div class="height5">5</div><div class="height6">6</div> </div> <div class="fwrapp aitems5"> <div class="height1">1</div><div class="height2">2</div> <div class="height3">3</div><div class="height4">4</div> <div class="height5">5</div><div class="height6">6</div> </div> |
| ブラウザー 表示例 |
|---|
1
2
3
4
5
6
↑ { align-items: flex-start; } の表示 ↑ 1
2
3
4
5
6
↑ { align-items: flex-end; } の表示 ↑ 1
2
3
4
5
6
↑ { align-items: center; } の表示 ↑ 1
2
3
4
5
6
↑ { align-items: baseline; } の表示 ↑ 1
2
3
4
5
6
↑ { align-items: stretch; } の表示 ↑ |