[知識まとめ]HTML 5レイアウトのflexレイアウトまとめ

#レイアウトのいくつかの方法
1.静的(自然)レイアウト(float,positionなどの修飾がないレイアウト)2.フローティングレイアウト3.位置決めレイアウト4.フレックスレイアウト5.グリッドレイアウト
#フレックスレイアウト
コンセプト:CSS 3のフレキシブルボックス(Flexible Box)またはFlexBoxは、ページが異なる画面サイズやデバイスタイプに適応する必要がある場合に適切なレイアウトを確保するレイアウト方式である.
#原理弾性レイアウトは、内部要素の幅を調整することにより、利用可能な表示空間に対する任意の表示装置の最適な充填能力である.
#名称説明##軸(Axis)
各弾性枠レイアウトには2つの軸が含まれており、弾性項目(サブエレメント)が順番に並ぶ水平軸を主軸(水平線)と呼び、主軸に垂直なものを横重(垂直線)と呼ぶ
#寸法(Dimension)弾性容器の主軸側軸により、弾性項目の幅が高く、対応する主軸のものを主軸寸法(幅)と呼び、対応する側軸のものを側軸寸法(高さ)と呼ぶ
#フレックスレイアウトの定義
display:flex; 値flexは、フレックスコンテナをブロックレベル要素にし、親レベルでdisplay:inline-flexを定義します.値inline-flexは、弾性容器を行内元素とする.親に定義します.display:none;
注意:弾性レイアウトを使用すると、サブ要素のfloat、clear、vertical-alignが無効になります.
#flex属性分類#.コンテナ属性(親に作用)###a.flex-direction
この属性は主軸(水平)の方向(項目の配列方向)を決定します###b.flex-wrapデフォルトでは、項目は1行に並んでいます.このプロパティ設定により、flex-directionとflex-wrapプロパティの略記##d.justity-contentで定義されたアイテム(サブ)の主軸(水平)方向の位置合わせ方法##e.align-itemsで定義されたアイテム(サブエレメント)が改行表示されるかどうかを決定できます.交差軸の位置合わせ##f.align-contentは、1本の軸だけが機能しない場合、複数の軸の位置合わせを定義します.
##2.プロジェクト(子)属性(属性は子要素に書きます)###a.order
プロジェクト(サブレベル)の配列順序を定義し、数値が小さいほど配列が前になると、値はマイナスになります###b.flex-growプロジェクト(サブレベル要素)の拡大率を定義します.デフォルトは0です.スペースが足りない場合、このプロジェクトは###c.flex-shrinkでプロジェクトの縮小率を定義しません.デフォルト1、スペースが足りない場合、このプロジェクトは自動的に縮小します.###d.flex-basisこのプロパティは、主軸に余分なスペースがあるかどうかを計算します.
###e.flex
flex-grow、flex-shrinkとflex-basisの略記、つまり彼らの複合書き方###f.align-selfこの属性は、単一のプロジェクトに他のプロジェクトとは異なる位置合わせを許可し、デフォルト値autoは、親要素のalign-items属性を表し、親がいなければstretchと同等である
#コンテナ属性flex-direction属性を具体的に示す##HTMLコード

		flex-direction  
		flex-direction         （        ）。
		.box {
		  flex-direction: row | row-reverse | column | column-reverse;
		}
		row（   ）：       ，     。
		row-reverse：       ，     。
		column：       ，     。
		column-reverse：       ，     。	
		
flex-direction: row
 A 
 
 B 
 
 C 
flex-direction: row-reverse
 A 
 
 B 
 
 C 
flex-direction: column
 A 
 
 B 
 
 C 
flex-direction: column-reverse
 A 
 
 B 
 
 C 
##CSSスタイル
	.box1{
				display: flex;
			}
			.box1 li{
				width: 100px;
				height: 100px;
				border: 2px solid red;
				text-align: center;
				list-style: none;
				
			}
		#box1{
			flex-direction: row;
		}
		
		#box2{
		flex-direction: row-reverse;	
		}
		#box3{
		flex-direction: column;	
		}			
		#box4{
		flex-direction: column-reverse;	
		}

  
#    ...