display プロパティ

display:block;、display:inline;、 display:inline-block;

　block 値、inline 値、 inline-block 値は、エレメントをブロックエレメントやインラインエレメントに変更することができます。

display:block;、display:inline;

　例えば <span> エレメントをブロックエレメントに、 <p> をインラインエレメントに指定することができます。
　<span> エレメントは改行のある表示になり、<p> は改行のない表示になります。

<style>
	span {
		display: block;
	}

	p {
		display: inline;
	}
</style>

<p>display の<span>インラインエレメント</span>、<span>ブロックエレメント</span>の指定による変化です。</p>

　この例はあまり意味がありませんが、CSS のプロパティによってはブロックエレメントでなければ機能しない、またはインラインエレメントでなければならないプロパティがあります。
　そのような場合に、display: block; や display: inline; を指定することでインラインエレメントをブロックエレメントへ、ブロックエレメントをインラインエレメントに変更し、目的の CSS プロパティを機能させることができます。

　さらに、以下の inline-block はインラインの特徴を持ちながらブロックレベルとして機能します。ブロックレベルしか機能しない CSS プロパティを反映することができます。

display:inline-block;

　inline-block はインラインエレメントとブロックエレメントの特徴を合わせもつエレメントへの指定です。inline-block は改行がありませんが、幅や高さ、余白、位置を変えることができます。
　例えば以下のように <span> を inline-block に指定すると、表示はインラインエレメントのように改行がありませんが、幅や高さ、余白、位置を変えることができるようになります。

<style>
	<span>{
		display: inline-block;
		width: 16em;
		height: 1.5em;
		border:1px dotted red;
	}

	<p>{
	}
</style>

<p>display の<span>インラインブロックエレメント</span>の指定による変化です。</p>

　このようにインラインとブロックレベルで機能する CSS プロパティを使用することができます。

display:grid;

　grid 値は、包括するエレメントをレイアウトすることができます。こちらは位置と大きさを指定します。
　レイアウトは固定することになるので、PC、タブレット、スマートフォンといったディスプレイの解像度ごとに指定する必要があります。
　もしくはレイアウトを固定してもよいエレメント内で使用します。

　詳しくは、display:grid;を参照してください。

display:flex;

　display:flex;は、レスポンシブウェッブデザインに利用できるプロパティです。

　float プロパティがありますが、表示方法がブラウザ任せのところが多くて曖昧ですので、全体のレイアウトを設定するには注意が必要ですが、この flex 値を使ったほうがより簡易です。
　PC、タブレット、スマートフォンといったディスプレイの解像度によって横並びを調整したい場合に便利です。

display: flex;
justify-content: normal;
align-items: normal;
flex-wrap: nowrap;
flex-direction: row;

　詳しくは「display:flex;」を参照してください。