14. HTML - CSS - display レンダリングボックスの指定

 
14.1 概要
14.2 box は使わない方がいい
14.3 display: flex での中央寄せ

14.1 概要

 「display - CSS: カスケーディングスタイルシート | MDN」を読むと「要素に使用されるレンダリングボックスの種類を指定します。」と書いてあります。  そもそもレンダリングってなんだ?  「ウィキペディア - レンダリング (コンピュータ)」によれば「データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成することをいう。」ってこれまた正に抽象的。  まぁ、ひとつの塊(かたまり)としておきましょ。  でまぁ

display: block;
display: none;
 とか書きます。  わたしは一番、使うのはこれかな?  詳細は「display - CSS: カスケーディングスタイルシート | MDN」をご参照ください。

14.2 box は使わない方がいい

 実は、これが書きたかった。  別章で書いている gulp を使用して .scss を .css へ変換しようとしたら

> gulp ターゲット
[08:03:13] Using gulpfile /パス/gulpfile.js
[08:03:14] Starting 'ターゲット'...
[08:03:14] Finished 'ターゲット' after 17 ms
[08:03:14] gulp-autoprefixer:
  autoprefixer: /パス/ターゲット.css:210:3: You should write display: flex by final spec instead of display: box
 でなこと言われちゃいまして・・・。

		display: box;
 がいけないらしい。  これは古い書き方だそうで、同じ効果を得たいなら

		display: flex;
 と書きなさいということだそうです。

14.3 display: flex での中央寄せ

 「display: frex;」で文字を中央寄せにしようと「text-align: center;」下記のように記述しても

div.center
{
	all: initial;
	display: flex;
	text-align: center;
	border: double 1px black;
	width: 50%;
	padding: 1em 1em 1em 1em;
	margin-left: auto;
	margin-right: auto;
}
 ご覧のように中央に寄らないわけです(実際の HTML の記述はブラウザのソース表示機能でご確認ください)。

中央に寄せたいんだな
 「display: frex;」で文字を中央寄せにするには「align-items: center;」を使うんですと。  ちなみに上下中央は「justify-content: center;」。

div.center
{
	all: initial;
	display: flex;
	align-items: center;
	justify-content: center;
	border: double 1px black;
	width: 50%;
	padding: 1em 1em 1em 1em;
	margin-left: auto;
	margin-right: auto;
}

中央に寄っているはず
 ブラウザによってはベンダープレフィックスが必要になりますが・・・。  Firefox 61.0 であれば上記はくっきり中央寄せで表示されます。