Flex Box

フレックスにする

  display: flex;
  display: inline-flex;	/* インライン要素をFlexibleにするにはこちらを使用 */

<div>
  <p>AAAA<br>AAAA</p>
  <p>BB</p>
  <p>CCCCCC<br>CCCCCC<br>CCC・・・</p>
</div>
			

div { display: flex; }
			

コンテナ内のアイテム配置方向

  flex-direction: row;			1→2→3…左から右へ （デフォ）
  flex-direction: row-reverse;	3→2→1…右から左へ
  flex-direction: column;			1→2→3…上から下へ
  flex-direction: column-reverse;	3→2→1…下から上へ

コンテナ内のアイテム折り返し方

  flex-wrap: nowrap;				横1行に並ぶように縮小（デフォ） ※入りきらなければoverflowする。普通はhiddenを指定。
  flex-wrap: wrap;				複数行に折り返して並ぶ　上から下へ
  flex-wrap: wrap-reverse;		複数行に折り返して並ぶ　下から上へ

コンテナ内のアイテムの横位置

主軸方向（縦並び時は縦方向、横並び時は横方向）に効く。単純に縦横ではないので注意。

  justify-content: flex-start;	左端揃え （デフォ）
  justify-content: center;		中央揃え	
  justify-content: flex-end;		右端揃え   要素が右端に並ぶ
  justify-content: space-between;	両端揃え均等割り付け（両端は余白を取らない）
  justify-content: space-around;	等間隔均等割り付け（両端も余白を取る）

flexアイテムのコンテナ内縦位置

親要素に空きスペースがあったときに、子要素の上下の配置を決める

  align-items: stretch;		高さいっぱいに伸びて配置（デフォ）
  align-items: flex-start;	高さ方向コンテナの始点合わせで配置
  align-items: center;		高さ方向コンテナの中央合わせで配置
  align-items: flex-end;		高さ方向コンテナの終点合わせで配置
  align-items: baseline;		アイテムの中身のベースライン合わせで配置

複数行の時のアイテムのコンテナ内縦位置割り付け

主軸に交差する方向（縦並び時は横方向、横並び時は縦方向）に効く。単純に縦横ではないので注意。

アイテムが flex-wrap: nowrap; もしくは一行に収まる時は無効になる。

■ flex-wrap: wrap; もしくは flex-wrap: wrap-reverse; の指定が必要。
■ 親要素に height の指定が必要

  align-content: stretch;			コンテナの上下いっぱいに均等割付けで配置（デフォ）
  align-content: flex-start;		コンテナの高さ方向始点合わせで詰めて配置
  align-content: center;			コンテナの高さ方向中央合わせで詰めて配置	 中央揃え
  align-content: flex-end;			コンテナの高さ方向終点合わせで詰めて配置

//以下は縦並び時に効く
  align-content: space-between;		最初の要素が左端に、最後の要素が右端に移動し、その間の要素は等間隔
  align-content: space-around;		上下いっぱいに配置し上下の両端も均等な余白を取る
  align-content: space-evenly;		アイテムのすべての余白を均等につける（※仕様書で定義されてはいない）

flex-wrap: wrap;

flex-wrap: wrap;
flex-direction: column;

flex-wrap: wrap-reverse;

flex-wrap: wrap-reverse;
flex-direction: column;

ショートハンド

  flex-flow: flex-direction |sp| flex-wrap;
  例：flex-flow: row-reverse wrap;	… 右から左へ折り返して並び、上から下へ複数行に折り返す
	

div { flex-flow: row-reverse wrap; }
		

アイテムを縦横方向センタリングする

  display: flex;
  justify-content: center;
  align-items: center;

div {
  display: flex;
  justify-content: center;
  align-items: center;
	}
		

アイテムの表示の順番

orderで指定がなければ1番初めに記述されたアイテムが０（デフォルト）、同じ値なら記述された順
  order: 0;			1番初めに記述されたアイテムが０（デフォ）
  order: -1;		０より1つ左に表示する
  order: 1; 		０の1つ右に表示する
  order: 2;			０の2つ右に表示する

/*A*/  p:nth-child(1) { order: 1;}
/*B*/  p:nth-child(2) { order: 0;}
/*C*/  p:nth-child(3) { order: -1;}
/*D*/  p:nth-child(4) { order: 2;}

アイテムの幅（マイナスは無効）

  flex-grow: 0;		同じ数字にすると各アイテムの幅は均等になる（デフォ）
  flex-grow: 2;		中身なりに表示した後の余白を、指定した数字倍の幅で分割し元の幅を伸長する

/*A*/  p:nth-child(1) { flex-grow: 0;}
/*B*/  p:nth-child(2) { flex-grow: 2;}
/*C*/  p:nth-child(3) { flex-grow: 1;}
/*D*/  p:nth-child(4) { flex-grow: 2;}

幅の縮小率 flex-wrap:nowrap;と同時に使用

アイテムの幅が親要素の幅を超えたとき、はみ出た部分をどのように縮小するか指定できる。

  flex-shrink: 0; 	オリジナルの幅を維持（デフォ）
  flex-shrink: 2; 	値を変えたアイテムだけ指定した数字倍縮小される

/*A*/  p:nth-child(1) { flex-shrink: 0;}
/*B*/  p:nth-child(2) { flex-shrink: 2;}
/*C*/  p:nth-child(3) { flex-shrink: 4;}
/*D*/  p:nth-child(4) { flex-shrink: 1;}

flexアイテムを折り返していないときに、flexアイテムの上下の配置を決める

align-itemsと同じだがこちらは個々の子要素に適用する

  align-self: auto;			（デフォ）親要素の align-items の値を継承
  align-self: stretch;		高さいっぱいに伸びて配置 またはコンテンツの一番多い子要素の高さに合わせて配置
  align-self: flex-start;		高さ方向始点合わせで配置
  align-self: flex-end;		高さ方向終点合わせで配置
  align-self: center;			高さ方向中央合わせで配置
  align-self: baseline;		アイテムの中身のベースライン合わせで配置

/*A*/  p:nth-child(1) { align-self: auto;}
/*B*/  p:nth-child(2) { align-self: stretch;}
/*C*/  p:nth-child(3) { align-self: flex-start;
/*D*/  p:nth-child(4) { align-self: center;}
/*E*/  p:nth-child(5) { align-self: flex-end;}
/*F*/  p:nth-child(6) { align-self: baseline;}

幅、高さを指定 （width, height と同じ）

  flex-basis: auto;		（デフォ）中身なり
  flex-basis: 10rem;		flex-direction:row または row-reverse の時は横幅を指定
  						flex-direction:column または column-reverse の時は縦幅を指定

p { flex-basis: 10rem;}

ショートハンド

  flex: flex-grow |sp| flex-shrink |sp| flex-basis; ※アイテムの幅　幅の縮小率　幅または高さを指定

  flex: 0 1 auto;	（デフォ）	※幅は均等（中身なり）、縮小しない、幅高さ（この場合横型なので幅）中身なり
  flex: 1 1 100px;			※幅は等倍、縮小しない、幅高さ（この場合縦型なので高さ）100px

		単位がない数値を 1 つ指定 → 					flex-grow
		単位が付いた数値で幅または高さを 1 つ指定 →	flex-basis 
		値を 2 つ指定 →  							flex-grow | flex-basis 
		値を 3 つ指定 →  							flex-grow | flex-shrink | flex-basis
	

アイテムのセンタリング

コンテナ … align-items: center;
アイテム … align-self: center;
	

div {
	display: flex;
	justify-content: center;
	align-items: center;
	}
/*A*/  div p:nth-child(1) {
	align-self: flex-start;
	}
/*B*/  div p:nth-child(2) {
	align-self: center;
	}
/*C*/  div p:nth-child(3) {
	align-self: flex-end;
	}