【64-10】アイテムの個別配置を一度に指定する align-items (交差軸方向)
最終更新日：2022年09月23日 （初回投稿日：2022年08月26日）
align-selfプロパティは アイテムが占めるエリア内での交差軸方向の位置を個別に決めるものでした。
align-selfプロパティではアイテムに指定してその1個だけに効きましたが、今回の align-itemsプロパティは、コンテナ側に指定し、同じ指定をアイテム全員に効かすことができます。
交差軸（ブロック軸）については、
【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ） をご覧ください
ボックス配置は、下記のように記事を分けます。
- 【63】アイテム間の空きを指定する gap（row-gap, column-gap）
- 【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ）
- 【64-2】ボックス配置の「整列キーワード」まとめ
- 【64-3】アイテムの配置・分布を指定する justify-content（主軸方向）
- 【64-4】アイテムの配置・分布を指定する align-content（交差軸方向）
- 【64-5】アイテムの配置・分布を指定するショートハンド place-content
- 【64-6】アイテム個別の配置を指定する justify-self (主軸方向)
- 【64-7】アイテム個別の配置を指定する align-self (交差軸方向)
- 【64-8】アイテム個別の配置を一括指定する place-selfショートハンド
- 【64-9】アイテムの個別配置を一度に指定する justify-items (主軸方向)
- 【64-10】アイテムの個別配置を一度に指定する align-items (交差軸方向) ←今日はココ
- 【64-11】アイテム配置を一括指定する place-itemsショートハンド
参考：
・CSS Box Alignment Module Level 3 | W3C Working Draft
・CSS ボックス配置 | MDN
align-itemsプロパティの値
値は全部整列キーワードで、align-self の値とほぼ同じ。
交差軸方向なので、left と right がありません。
| align-itemsプロパティの値 | |
|---|---|
| CSS構文 | normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ] normalがデフォルト値。 |
| <baseline-position> | [ first | last ]? baseline baseline、first baseline、last baseline の3種の書き方。 baseline 単独で使うと first baseline と同義。 first baseline の代替配置は start、 last baseline の代替配置は end 。 注意：このキーワードはW3C仕様書の冒頭で「at-risk」に入ってて「勧告候補時に落とされるかも（may be dropped during the CR period）」とあるので無くなる可能性もあります。（2022年5月記） |
| <overflow-position> | unsafe | safe 注意：この2つはW3C仕様書の冒頭で「at-risk」に入ってて「勧告候補時に落とされるかも（may be dropped during the CR period）」とあるので無くなる可能性もあります。（2022年5月記） |
| <self-position> | center | start | end | self-start | self-end | flex-start | flex-end |
| グローバル値 | align-items: inherit; 親の値を継承 align-items: initial; 継承した親の値を解消しデフォルト値に戻す align-items: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作 |
| 値の継承 | なし | 適用できる要素 | すべての要素 |
|---|
CSS構文は、
normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]
となっています。これを読み解くと、
normal、stretch、<baseline-position> は単独で使う。
<self-position> は単独で使うか、safe か unsafe を頭にくっつけて使うということ。
デフォルト値の auto は、親に align-itemsプロパティの指定があればそれに従い、そうでなければ mormal の値になります。
mormal は、レイアウトモードによって挙動が異なります。
| で区切るとそのうちのどれか1つだけ存在するという意味。
[ ] はひとまとまりの成分。
? は省略可能で、0または1回出現。
詳しくは CSSの値の定義構文 | MDN をご覧ください。
それぞれの整列キーワードの意味は、
【64-2】ボックス配置の「整列キーワード」まとめ でざっとまとめていますのでご覧ください。
align-itemsプロパティを使ってみた（サンプル）
align-itemsプロパティは、コンテナ側に指定します。
Grid Layout と Flexbox でサンプルを作ってみました。
Grid Layout での align-items
Grid Layout で align-items を試してみます。
通常の横書きモードでのサンプルなので、交差軸は垂直方向です。
サンプルの HTMLやCSS の基本はこちら。
<div class="container">
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
</div>
.container{
box-sizing: border-box;
border: 1px solid#ccc;
padding: 0;
display: grid;
grid-template-rows: repeat(2, 7em);
grid-template-columns: repeat(2, 50%);
/*align-items:「値」; はここに追加していきます*/
}
.container div{
box-sizing:border-box;
padding:1em;
text-align:center;
}
.container div:nth-child(1) {background:#fcf}
.container div:nth-child(2) {background:#ffc}
.container div:nth-child(3) {background:#cfc}
.container div:nth-child(4) {background:#eee}
align-items: normal
（デフォルト = stretch と同じになります。ボックスに縦横比やサイズがある場合は startのように動作します）
align-items: stretch
align-items: center
align-items: start
align-items: end
align-items: self-start
align-items: self-end
align-items: flex-start（Flexboxでない場合、代替のstartになります）
align-items: flex-end（Flexboxでない場合、代替のendになります）
align-items: baseline（値を first baseline にしても同じです）
サンプルのテキストを2行以上になるように長めにして、それぞれのアイテムの line-height（行の高さ）をバラバラに変えてみました。
align-items: baseline にすると、交差軸方向に、各アイテムの最初の行のベースラインで揃います。
align-items: last baseline
交差軸方向に、各アイテムの最後の行のベースラインで揃っていますね。
上記ベースラインのサンプルの HTMLやCSS はこちら。
<div class="con_grid con_g_basel"> <!--新しいクラス名「con_g_basel」を加えています-->
<div>Baseline alignment is a form of positional alignment.</div>
<div>Baseline alignment is a form of positional alignment.</div>
<div>Baseline alignment is a form of positional alignment.</div>
<div>Baseline alignment is a form of positional alignment.</div>
</div>
/*グリッド用の指定は今までのサンプルと同じです*/
/*ここから新しいクラス名を使って各アイテムの line-height を変えてるだけです*/
.con_g_basel div:nth-child(1) {line-height:1.2em}
.con_g_basel div:nth-child(2) {line-height:2.2em}
.con_g_basel div:nth-child(3) {line-height:2.4em}
.con_g_basel div:nth-child(4) {line-height:1em}
Flexbox での align-items
Flexboxで align-items を試してみます。 通常の横書きモードでのサンプルなので、交差軸は垂直方向です。
サンプルの HTMLやCSS の基本はこちら。
<div class="con_flex">
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
</div>
.con_flex{
box-sizing:border-box;
border:1px solid#ccc;
padding:0;
margin:0 0 3em;
display:-webkit-flex;
display: flex;
/*align-items:「値」; はここに追加していきます*/
height:7em
}
.con_flex div{
box-sizing:border-box;
padding:1em;
text-align:center;
flex-basis:25%;
}
.con_flex div:nth-child(odd) {background:#85cbbf; padding:1em 0}
.con_flex div:nth-child(even) {background:#ffe9a9; padding:1em 0}
align-items: normal（デフォルト = stretch と同じになります）
align-items: stretch
align-items: center
align-items: start
align-items: end
align-items: self-start
align-items: self-end
align-items: flex-start
align-items: flex-end
align-items: baseline（値を first baseline と指定しても同じです）
サンプルのテキストを2行以上になるように長めにして、それぞれのアイテムの line-height（行の高さ）をバラバラに変えてみました。
align-items: baseline にすると、交差軸方向に、各アイテムの最初の行のベースラインで揃います。
is a form of positional alignment.
is a form of positional alignment.
is a form of positional alignment.
is a form of positional alignment.
align-items: last baseline
交差軸方向に、各アイテムの最後の行のベースラインで揃っていますね。
is a form of positional alignment.
is a form of positional alignment.
is a form of positional alignment.
is a form of positional alignment.
上記ベースラインのサンプルの HTMLやCSS はこちら。
<div class="con_grid con_f_basel"> <!--新しいクラス名「con_f_basel」を加えています-->
<div>Baseline alignment is a form of positional alignment.</div>
<div>Baseline alignment is a form of positional alignment.</div>
<div>Baseline alignment is a form of positional alignment.</div>
<div>Baseline alignment is a form of positional alignment.</div>
</div>
/*フレックスボックス用の指定は今までのサンプルと同じです*/
/*ここから新しいクラス名を使って各アイテムの line-height を変えてるだけです*/
.con_f_basel {height:13em}
.con_f_basel div:nth-child(1) {line-height:1.6em}
.con_f_basel div:nth-child(2) {line-height:3em}
.con_f_basel div:nth-child(3) {line-height:1em}
.con_f_basel div:nth-child(4) {line-height:2em}
次回予告
次回は、place-itemsショートハンドプロパティを使ってみよう。
これは、前回の justify-items と、今回やった align-items のショートハンドです。
- 関連記事
-
- 【65-3】属性セレクター [att^="val"] [att$="val"] [att*="val"]
- 【65-3】属性セレクター [att] [att="val"] [att~="val"] [att|="en"]
- 【65-2】結合子を使うセレクター（E F, E > F, E + F, E ~ F）
- （ちょっとメモ）「,」で区切る「セレクターリスト」
- 【65-1】エレメンタルセレクター（要素名で指定するセレクター）
- 【65】CSSのセレクターを整理しよう（セレクター 一覧）
- 【64-11】アイテム配置を一括指定する place-itemsショートハンド
- 【64-10】アイテムの個別配置を一度に指定する align-items (交差軸方向)
- 【64-9】アイテムの個別配置を一度に指定する justify-items (主軸方向)
- 【64-8】アイテム個別の配置を一括指定する place-selfショートハンド
- 【64-7】アイテム個別の配置を指定する align-self (交差軸方向)
- 【64-6】アイテム個別の配置を指定する justify-self (主軸方向)
- 【64-5】アイテムの配置・分布を指定するショートハンド place-content
- 【64-4】アイテムの配置・分布を指定する align-content（交差軸方向）
- 【64-3】アイテムの配置・分布を指定する justify-content（主軸方向）
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
