該当の要素を縦に並べるか横に並べるかを指定するプロパティです。
　初期値は要素ごと違うので注意が必要です。
　ブロックレベル要素と呼ばれる見出し・段落・表など、文書を構成する基本要素（例：<div>、<h1>-<h6>、<ol>、<p>、<table>、<ul>、<li>）の初期値はblockです。
　インライン要素と呼ばれるブロックレベル要素の内部で利用される要素（例：<a>、<img>、<span>)の初期値はinlineです。
　各要素ごと、縦に並ぶか横に並ぶか初期値が設定されていると言えます。

　主に<ul><li>を利用してメニューを作成する際にこの値を設定必要があります。縦並びはblock、横並びはinline-blockを主に利用しますが、内部テキストの縦揃えに問題があるため、後述するFlexメニュー（フレキシブルボックスレイアウト）を利用するか、各<li>にbackground画像を配置し画像内のテキストで縦揃えに見せます。

<ul><li>の利用例

　～　block　～　

　<ul>はブロックレベル要素なので初期値はblock、<li>もblock(厳密にはlist-itemなのですが、挙動はblockとほぼ同じです。)、よってdisplayを指定しなければ以下の表示となります。

• 結果

• HTML

• CSS

• • Menu1
  • Menu2
  • Menu3

  　width、height、margin、padding設定可能です。

  　text-align:center;は効きますが、vertical-align: middle;が効きません。この為、内部文字の縦揃えを行うには工夫が必要になります。

• /* HTMLの例 */
  
  	
  
  	
  Menu1
  	
  Menu2
  	
  Menu3
  	
  	

• /* CSSの例 */
  
  .sample1 {
  	margin:5px;
  	padding:5px;
  	background:#c3cee0;
  	border:1px solid darkgray;
  }
  
  .sample1 li{
  	margin: 5px;
  	padding:5px;
  	background:#a1b9e0;
  	border:1px solid gray;
  	height:50px;
  	text-align:center;
  }
  	

　～　block（縦揃え対応：テキスト１行固定）　～　

　blockの場合、vertical-align: middle;が使えないので、縦揃えの工夫が必要になります。内部のテキストが１行固定の場合は、<li>に高さ（height）を与える前提で、heightとline-heightを同じ値にすることで縦揃えになります。

• 結果

• HTML

• CSS

• • Menu1
  • Menu2
  • Menu3

  　デメリット：
  　レスポンシブで幅が小さくなり、２行になった場合に縦揃えが崩れます。この場合の対応も状況によりCSSに記載しないといけないので手間です。
  　heightを指定するのが前提条件となるため、フレキシブルに大きさが変わるようなメニューにはなりません。

• /* HTMLの例 */
  
  	
  
  	
  Menu1
  	
  Menu2
  	
  Menu3
  	
  	

• /* CSSの例 */
  
  .sample2 {
  	margin:5px;
  	padding:5px;
  	background:#c3cee0;
  	border:1px solid darkgray;
  }
  
  .sample2 li{
  	margin: 5px;
  	padding:5px;
  	background:#a1b9e0;
  	border:1px solid gray;
  	height:50px;
  	text-align:center;
  	line-height:50px;
  }
  	

　～　block（縦揃え対応：テキスト複数行固定）　～　

　上記の１行ではなく２行以上で固定する場合です。top:50%;としてmargin-top:-（line-height）×（行数）/2を設定する方法もあるのですが、この方法の場合<li>内にインライン要素を作らなくてはならず、コードの視認性も悪くなります。現行のCSS3の問題点を無理やり回避するような方法です。今後CSS4以降で改善されると、本当に馬鹿らしいプログラムを書かされていたと思うことになります。ですので、ここまで来たら、後述するフレキシブルボックスレイアウトを利用する方が良いと思います。

　～　inline　～　

　要素が横に並びます。高さ・横幅などを指定できないため、内部のテキストの長さによりボックスサイズは可変となります。margin、paddingについては左右横方向の設定は可能ですが、上下縦方向の設定はできません。

　このような仕様の為、見栄えのよいメニュー作成には向かず、使いどころは限られます。

• 結果

• HTML

• CSS

• • Menu1
  • Menu2
  • Menu3

  　width、height設定不能。margin、paddingは左右横方向のみ設定可能です。

  　text-align:center;、vertical-align: middle;ともに効きますが、width、height設定不能なためあまり意味がありません。

• /* HTMLの例 */
  
  	
  
  	
  Menu1
  	
  Menu2
  	
  Menu3
  	
  	

• /* CSSの例 */
  
  .sample3 {
  	margin:5px;
  	padding:5px;
  	background:#c3cee0;
  	border:1px solid darkgray;
  }
  
  .sample3 li{
  	display:inline;
  	margin: 0 5px;
  	padding:0 5px;
  	background:#a1b9e0;
  	border:1px solid gray;
  	line-height:20px;
  }
  	

　～　inline-block　～　

　inline同様要素が横に並びますが、各要素がブロック化されるため高さ・横幅などを指定できます。横並びメニューの場合、inlineよりもinline-blockの方がよく利用されますが、block同様、内部文字の縦揃えに問題があります。

• 結果

• HTML

• CSS

• • Menu1
  • Menu2
  • Menu3

  　width、height、margin、padding設定可能です。

  　text-align:center;は効きますが、vertical-align: middle;が効きません。この為、内部文字の縦揃えを行うにはblock同様工夫が必要になります。

• /* HTMLの例 */
  
  	
  
  	
  Menu1
  	
  Menu2
  	
  Menu3
  	
  	

• /* CSSの例 */
  
  .sample4 {
  	margin:5px;
  	padding:5px;
  	background:#c3cee0;
  	border:1px solid darkgray;
  	text-align:center;
  }
  
  .sample4 li{
  	display:inline-block;
  	margin: 5px;
  	padding:5px;
  	background:#a1b9e0;
  	border:1px solid gray;
  	width:200px;
  	height:50px;
  	text-align:center;
  }
  	

　display:none;を指定することで、要素を非表示にできます。

　要素を非表示にするプロパティとして他にvisibility:hidden;がありますが、

　という大きな違いがあります。display:none;はこの性質を利用して、レスポンシブデザインにおいて、PCでは表示してスマホでは非表示にするという用途によく使われます。

　<ul><li>を利用してメニューを作成する際、特に縦揃えに手間取ることがよくあります。これを改善する規格がFlexメニューです。中央縦揃えを非常に簡単に行え、柔軟なメニューを作成できます。
　問題はブラウザの対応状況です。現在、ほぼすべてのモダンブラウザに対応していますが、ＩＥ１１については型崩れの可能性があるため、実際にFlexメニュー作成後確認必須です。さらに過去のＩＥ１０以前のブラウザまで考慮するとなると、このFlexメニューは使用できないという話になるのですが、既にＩＥ１０以前はサポートも切れていますし、もうFlexメニューを普段使いして良い状況だと思います。

Flexメニュー（フレキシブルボックスレイアウト）の利用例

～　<li>要素および内部テキストが全て中央縦揃え　～

• 結果

• HTML

• CSS

• • Menu1
  • Menu2
  • Menu3

  　display:flex;は適用したい要素の親要素に設定します。つまり<ul>に記載しているdisplay:flex;は<li>に対して、<li>に記載しているdisplay:flex;は<li>の内部要素に対して適用されます。

• /* HTMLの例 */
  
  	
  
  	
  Menu1
  	
  Menu2
  	
  Menu3
  	
  	

• /* CSSの例 */
  
  .sample5 {
  	display:flex;
  	display: -webkit-flex;
  	justify-content: center;
  	-webkit-justify-content: center;
  	align-items:center;
  	-webkit-align-items: center;
  	margin:5px;
  	padding:5px;
  	background:#e2b1e0;
  	border:1px solid darkgray;
  }
  
  .sample5 li{
  	display: flex;
  	display: -webkit-flex;
  	align-items:center;
  	-webkit-align-items: center;
  	justify-content:center;
  	-webkit-justify-content:center;
  	margin: 5px;
  	padding:5px;
  	background:#d153ca;
  	color:#fff;
  	border:1px solid gray;
  	width:200px;
  	height:50px;
  	text-align:center;
  }
  	

　　Flexメニューのベンダープレフィックスについてですが、-webkit（Chrome、safari）については書いておいた方が、尚良いとされています。

　　～　記載例　～　

水平方向の並び方指定プロパティ（justify-content）

垂直方向の並び方指定プロパティ（align-items）