ほんっとにはじめての HTML5 と CSS3

今回は align-contentプロパティを使ってみよう。
これは前回の justify-content の縦バージョン（普通の横書きなら）みたいなやつ。

1. align-contentプロパティは交差軸方向を担当
2. align-contentプロパティの値
3. align-contentプロパティを使ってみた（サンプル）
   1. Grid Layout での align-content
   2. Flexbox での align-content
4. ブロックコンテナのボックス配置は...まだみたい

ボックス配置は、下記のように記事を分けます。

【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-contentプロパティは交差軸方向を担当

今回の align-content は 交差軸担当。 コンテナ内のアイテムの、交差軸方向の配置や分布の方法を決めます。
このプロパティも前回同様コンテナ側に指定します。

配置の場合は padding を調整している感じ。分布はアイテム間の空きを調整します。

配置か分布かは、指定する値（整列キーワード）によって変わります。
配置用には「位置的整列（center とか start とか end とか）」や「ベースライン整列（テキストのベースラインに合わせる整列）」などがあります。
分布用は「分布型整列キーワード（stretch、space-between、space-around、space-evenlyの4つ）」です。
詳しくは【64-2】ボックス配置の「整列キーワード」まとめ をご覧ください。

交差軸（ブロック軸）とは、主軸と交差する軸。
文字が流れる方向（書字しょじ 方向）を主軸と言い、普通の横書きモードなら主軸は横方向で、それに交差する交差軸はタテ方向です。
書字方向に対しての軸なので、縦書きモードだと軸が入れ替わります。

（詳しくは【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ） をご覧ください）

align-contentプロパティの値

値は 全部キーワードです。

align-contentプロパティの値
CSS構文	normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-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年3月記）
<content-distribution>	space-between | space-around | space-evenly | stretch
<overflow-position>	unsafe | safe 注意：この2つはW3C仕様書の冒頭で「at-risk」に入ってて「勧告候補時に落とされるかも（may be dropped during the CR period）」とあるので無くなる可能性もあります。（2022年3月記）
<content-position>	center | start | end | flex-start | flex-end
グローバル値	inherit; 親の値を継承 initial; 継承した親の値を解消しデフォルト値に戻す unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	なし	適用できる要素	Gridコンテナ flexコンテナ マルチカラム コンテナ ブロックコンテナ（tableセル含む）

CSS構文は、
normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>
となっています。これを読み解くと、
normal、<baseline-position>、<content-distribution> は単独で使う。
<content-position> は単独で使うか、safe か unsafe を頭にくっつけて使うということ。

デフォルト値は「normal」。これは使う要素によって挙動が異なります。
その他の値は全部整列キーワードで、
分布用だと space-between、space-around、space-evenly、stretch
配置用だと baseline、first baseline、last baseline、center、start、end、flex-start、flex-end です。
「flex-start」と「flex-end」は flexコンテナだけでしか使えません。

それぞれの整列キーワードの意味は、
【64-2】ボックス配置の「整列キーワード」まとめ でざっとまとめていますのでご覧ください。

align-contentプロパティを使ってみた（サンプル）

align-contentプロパティは、コンテナ側に指定します。
Grid Layout と Flexbox でサンプルを作ってみました。

Grid Layout での align-content

Gridアイテムのサイズの合計が Gridコンテナより小さい場合に分布や配置ができるので、サンプルでは、アイテムの高さは 3em、コンテナの高さを 15em にしています。
通常の横書きモードでのサンプルなので、交差軸は上から下の垂直方向です。

このように↓ grid-template-rows で 1トラックでも「fr」を使った値を指定すれば、アイテムはコンテナを満たすので、align-contentプロパティを使っても効果無しです。

Grid Layout についての詳細はこちらをご覧ください。
【62-1】Grid Layout の grid-template-rows, grid-template-columns

これ以降のサンプルの HTMLやCSS の基本はこちら。

<div class="container">
  <div> </div>
  <div> </div>
  <div> </div>
</div>

.container{
  box-sizing: border-box;
  border: 1px solid#ccc;
  padding: 0;
  display: grid;
  grid-template-rows: repeat(3, 3em);
  height: 15em; /*アイテムの高さの合計(3em×3=9em)より大きくしています*/
  /*align-content:「値」; はここに追加していきます*/
  }
.container div{padding: 1em 0; text-align: center; line-height: 1em}
.container div:nth-child(1) {background:#85cbbf}
.container div:nth-child(2) {background:#ffe9a9}
.container div:nth-child(3) {background:#f8c6bd}

align-content: normal（デフォルト = stretch と同じ振る舞いになります）

align-content: space-between
アイテム間（between）の空きが同じサイズになるように分布します。

align-content: space-around
アイテム間の空きの「半分の空き」を最初と最後のアイテムの前後（around）につけて分布します。

align-content: space-evenly
アイテム間の空きと、最初と最後のアイテムの前後の空きを全部均等（evenly）にして分布します。

align-content: stretch
アイテムのサイズを伸ばして（stretch）、コンテナいっぱいに満たします。
ですが、このサンプルではアイテムの高さを3emに指定しているので「start」と同じになります。

アイテムサイズが「auto」のときのみ align-content: stretch が効きます。
下は「grid-template-rows: repeat(3, auto)」と指定。
stretch が効いていますね。

align-content: center
コンテナの高さに対しての「センター揃え」にします。

align-content: start
交差軸方向での「始点」のある辺に揃えます。普通の横書きモードだと上揃えです。

align-content: end
交差軸方向での「終点」のある辺に揃えます。普通の横書きモードだと下揃えです。

align-content: baseline は、サンプルは作ってみたのですが、対応しているはずのFirefoxで見ても、今ひとつ使い方がわかりませんでした（2022年3月記）
今までと同じサンプルに「last baseline」を指定しましたが、まあ別にナンの変哲もなく「start」と同じ挙動↓
う〜ん、テキストのベースラインで揃えるってことは、アイテムを横に並べるのかな？

下のサンプルは、アイテムを横に並べてみて、line-height を、左から「1.2em」「2em」「1.6em」にしています。そこに「last baseline」を指定。
ですがテキストの一番下のベースラインに揃いませんね。

「last baseline」なので、こんな感じになるかと思ったんですがね。

ちなみに、この横並びのサンプルに「last baseline」でなく、他の値「center」や「end」を指定するとちゃんと効くんですが、align-content。
align-content: center

align-content: end

baselineは W3C仕様書の冒頭で「at-risk」に入ってて「勧告候補時に落とされるかも（may be dropped during the CR period）」とあるので、無くなる可能性もあります。そのためブラウザが実装しないのか？それとも何か指定の仕方があるのを私が理解してないだけかも？（2022年3月記）

Flexbox での align-content

Flexbox では、主軸・交差軸は flex-directionプロパティによって変わります。
flex-direction: row がデフォルト値で、この場合は交差軸はタテ方向です。
flex-direction: column を指定すると、アイテムはタテ方向に並ぶので、主軸がタテ方向、交差軸は横方向になります。

Flexboxの主軸・交差軸 に関して詳しくはこちら。
フレックスボックスの基本概念 - CSS: カスケーディングスタイルシート | MDN

Flexbox についてはこちらをご覧ください。
【18-1】Flexbox を使おう！（display: flexで Flexboxを作る）

今回のサンプルは、flex-direction: row（デフォ値）で作りますので、align-content の交差軸は タテ方向。タテ方向の分布・配置を指定します。

それと、Flexbox は flex-wrap: nowrap（アイテムをシングルラインで並べる）がデフォルトなんですが、flex-wrap: wrap か flex-wrap: wrap-reverse の場合にのみ align-content が効くので注意が必要です。
サンプルにも flex-wrap: wrap を指定しました。

サンプルの HTMLやCSS の基本はこちら。

<div class="con_flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

.con_flex{
  box-sizing:border-box;
  border:1px solid#ccc;
  padding:0;
  margin:0 0 .5em;
  height:12em;
  display: flex;
  flex-wrap: wrap;
  /*align-content:「値」; はここに追加していきます*/
  }
.con_flex div{
  flex-basis:33.333%;
  box-sizing:border-box;
  padding:1em;
  text-align:center;
  }
.con_flex div:nth-child(odd) {background:#85cbbf}
.con_flex div:nth-child(even) {background:#ffe9a9}

align-content: normal（デフォルト。stretch と同じになります）

align-content: space-between
アイテム間（between）の空きが同じサイズになるように分布します。

align-content: space-around
アイテム間の空きの「半分の空き」を最初と最後のアイテムの前後（around）につけて分布します。

align-content: space-evenly
アイテム間の空きと、最初と最後のアイテムの前後の空きを全部均等（evenly）にして分布します。

align-content: stretch（デフォルトのnormalでもこの挙動です）
アイテムのサイズを伸ばして（stretch）、コンテナいっぱいに満たします。

align-content: center
「センター揃え」にします。

align-content: start
交差軸方向での「始点」のある辺に揃えます。普通の横書きモードだと上揃えです。

align-content: end
交差軸方向での「終点」のある辺に揃えます。普通の横書きモードだと下揃えです。

align-content: flex-start（Flexboxだけの値です）
各アイテムは、Flexコンテナに依存して、交差軸方向での「始点」のある辺に揃えられます。
Flexbox以外でこの値を使うと「start」と同じになります。

align-content: flex-end（Flexboxだけの値です）
各アイテムは、Flexコンテナに依存して、交差軸方向での「終点」のある辺に揃えられます。
Flexbox以外でこの値を使うと「end」と同じになります。

align-content: baseline ですが、Grid Layout と同様 Flexbox でも使い方がよくわかりませんでした。
下のサンプルは、アイテムを横に並べて、line-height を、左から「1.2em」「2em」「1.6em」にしています。そこに align-content: last baseline を指定。 ですがテキストの一番下のベースラインに揃わず、単に normal（stretch）の挙動です。（2022年3月記）

unsafe | safe という値は、整列キーワードの <content-position> （center | start | end | flex-start | flex-end ）とセットで使うと W3C仕様書にあります。
これがちょっと...使い方が今ひとつわかりませんでした（2022年3月記）

下のサンプルは、flex-direction: column でアイテムを縦に並べ、align-content: center で中央に配置しました。
（注：flex-direction: column を指定することによって主軸と交差軸が入れ替わります。このサンプルの場合、交差軸は横方向になり、align-contentは横方向に効くというわけです）
仕様書では、align-content: safe center を使えば、文字数の多い単語があって文頭が隠れて見えなくなる場合は「center」を解除して「start」であったかのように整列させてテキストを読めるようにする。とあります。
ですが、別に「safe」を付けなくても、テキストに対するブラウザのアルゴリズムが元々あるので、長いテキストだけ文頭が見えるように左揃えになるんですよね。文頭が隠れて読めないという現象は起こらない。（なんならスクロールバーまで出すし）
この「safe と unsafe」は何のために使うキーワードなのかなぁ...？

unsafe | safe と baseline の両方とも、W3C仕様書の冒頭で「at-risk」に入ってて「勧告候補時に落とされるかも（may be dropped during the CR period）」とあるので、無くなる可能性もあります。
なにかやり方があって、私がそれに気付けていないだけかもですが、とりあえず「at-risk」であることを理由に（笑）今のところは未解決のまま放置しようと思います（2022年3月記）

ブロックコンテナのボックス配置は...まだみたい

align-contentプロパティは、適用できる要素に「ブロックコンテナ」も含まれていますが、MDNの記事によると、ブラウザは実際にはまだ対応はしていないようです。
→ブロック、絶対配置、表レイアウトのブロック配置 | MDN（2018年の記事ですが）

以下、MDNの記事から私なりに咀嚼したことをサンプルを作りながら書いてみます。
例えば下のサンプルのように、普通のブロックレベル要素は、左右のマージンを「auto」にすることで、水平方向（主軸方向）はセンター配置にできます。

上のサンプルの HTMLとCSS はこちら。

<div class="boxSample">
 <div></div>
</div>

.boxSample{
	border:1px solid #ccc;
	margin:0 0 2em;
	height:8em;
	}
.boxSample div{
	background:#fcc;
	width:5em;
	height:5em;
	margin:auto;
	}

上のサンプルで margin: auto（10行目）と指定しているので、天地左右ぜんぶautoを指定しているんですが、左右だけセンター合わせになり、上下にはなんの影響もありません。
これはブロックレベル要素の margin-top: auto と margin-bottom: auto は「0」になるって決まってるからなんです。（めんどくさいね〜。いろいろルールがあって）
詳しくは、【11-2】marginの auto という値の「？」を解決しておこう をご覧ください。

ここで垂直方向の位置もセンターにしたければ、「親ボックスを フレックスコンテナにするか、グリッドコンテナにして、ボックス配置のプロパティ（justify-content、align-content など）を使う」ってのが、今のところの まっとうな手段のようです。

ちなみにこの↑他にも、「親要素に display: table を、子要素に display: table-cell と vertical-align: middle 」を指定して垂直方向のセンター配置をする方法もあります。
詳細はこちら→【17-3-2】テーブル関連の要素のためのCSSプロパティ

下のサンプルでは、親に display: flex を指定して、ボックス配置のプロパティで垂直方向もセンターにしてみました。

CSS だけ変更しています。変更箇所はハイライトしています。

.boxSample{
	border:1px solid #ccc;
	margin:0 0 2em;
	height:8em;
    display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	}
.boxSample div{
	background:#fcc;
	width:5em;
	height:5em;
	/*margin:autoは削除してOK。*/
	}

上の CSS で、display: flex（5行目）を取っちゃうと、どのブラウザでもセンター配置にはなりません。
というわけで、まだブロックレベル要素そのものにはボックス配置のプロパティは使えない（ブラウザが対応してない）んだなと思う。（2022年5月記）

ちなみに上のCSSで、align-content じゃなく align-items を使っても垂直方向センターにできます。
align-content だと、flex-wrap: wrap を入れなきゃだけど、align-items なら無しでOKなので、こっちのほうが簡単かもです。（align-itemsについては後日記事にします）

次回予告

ちょっとね、<baseline-position>（first baseline、last baseline）や <overflow-position>（unsafe と safe）に関しては、どう使うか今ひとつわからない状態ですが、とりあえず 他の値が理解できたところで良しとしましょう（笑）

前回の justify-contentプロパティと今回の align-contentプロパティを一括で指定する place-contentショートハンドプロパティがあるので、次回はこれを使ってみます。

関連記事

• 【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（主軸方向）
• 【64-2】ボックス配置の「整列キーワード」まとめ
• 【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ）
• 【63】アイテム間の空きを指定する gap（row-gap, column-gap）
• （ちょっとメモ）IE10〜Edge15 では Grid Layout の仕様が違う
• 【62-9】Grid Layout での order, position-absolute, z-index, margin
• 【62-8】gridショートハンドで Gridコンテナ側の指定を一括にまとめる