よく使うCSS -Flex Box- ｜ OWLISH Web便利帖

Flexにしたい要素（アイテム）の親要素（コンテナ）に記述する。


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

//コンテナ内のアイテム配置方向
  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行に並ぶように縮小（デフォ）
  flex-wrap: wrap;				複数行に折り返して並ぶ　上から下へ
  flex-wrap: wrap-reverse;		複数行に折り返して並ぶ　下から上へ

//コンテナ内のアイテムの横位置
  justify-content: flex-start;		左端揃え （デフォ）
  justify-content: flex-end;		右端揃え   要素が右端に並ぶ
  justify-content: center;			中央揃え	
  justify-content: space-between;	両端揃え均等割り付け（両端は余白を取らない）
  justify-content: space-around;	等間隔均等割り付け（両端も余白を取る）

//flexアイテムのコンテナ内縦位置
//親要素に空きスペースがあったときに、子要素の上下の配置を決める
  align-items: stretch;			高さいっぱいに伸びて配置（デフォ）
  align-items: flex-start;		高さ方向コンテナの始点合わせで配置
  align-items: flex-end;		高さ方向コンテナの終点合わせで配置
  align-items: center;			高さ方向コンテナの中央合わせで配置
  align-items: baseline;		アイテムの中身のベースライン合わせで配置

//複数行の時のアイテムのコンテナ内縦位置割り付け
//flex-wrap: wrap; もしくは flex-wrap: wrap-reverse; の指定が必要。
	アイテムが一行並びの時は無効になる。
//親要素に height の指定が必要
  align-content: stretch;			コンテナの上下いっぱいに均等割付けで配置（デフォ）
  align-content: flex-start;		コンテナの高さ方向始点合わせで詰めて配置
  align-content: flex-end;			コンテナの高さ方向終点合わせで詰めて配置
  align-content: center;			コンテナの高さ方向中央合わせで詰めて配置	  中央揃え
  align-content: space-between;		最初の要素が左端に、最後の要素が右端に移動し、その間の要素は等間隔
  align-content: space-around;		上下いっぱいに配置し上下の両端も均等な余白を取る
  align-content: space-evenly;		アイテムのすべての余白を均等につける（※仕様書で定義されてはいない）

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

/*アイテムを縦横方向センタリングする*/
  display: flex;
  justify-content: center;
  align-items: center;

Flexにしたい要素(アイテム)に記述 → .flex_item …クラス名は任意


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

//アイテムの幅 （マイナスは無効）
  flex-grow: 0;		同じ数字にすると各アイテムの幅は均等になる（デフォ）
  flex-grow: 2;		値を変えたアイテムだけ指定した数字倍の幅になる

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

//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;		アイテムの中身のベースライン合わせで配置

//幅、高さを指定 （width, height と同じ）    
  flex-basis: auto;		（デフォ）
  flex-basis: 200px;	flex-direction:row または row-reverse の時は横幅を指定
  						flex-direction:column または column-reverse の時は縦幅を指定

//ショートハンド
  flex: flex-grow |sp| flex-shrink |sp| flex-basis;
  	flex: 0 1 auto;	（デフォ）
  	flex: 1 1 50px; 

//アイテムの内容の縦方向位置指定（例：縦方向センタリング）
コンテナ … align-items: center;
アイテム … align-self: center;

TEST フレックス

よく使うCSS -Flex Box-

Flex Container 用

Flex Item 用