よく使うCSS -Flex Box-

Flex Container 用 | Flex Item 用

Flex Container 用

Flexにしたい要素の親要素に記述 → .flex_container …クラス名は任意
→ Flex Item 用へ


//フレックスにする
  display: flex;

//配置方向
  flex-direction: row;				左から右へ (デフォ)
  flex-direction: row-reverse;		右から左へ
  flex-direction: column;			上から下へ
  flex-direction: column-reverse;	下から上へ

//並び方
  flex-wrap: nowrap;			横1行に並ぶように縮小(デフォ)
  flex-wrap: wrap;				複数行に折り返して並ぶ 上から下へ
  flex-wrap: wrap-reverse;		複数行に折り返して並ぶ 下から上へ

//flexアイテムの横位置
  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アイテムのコンテナ内縦位置割り付け
  align-content: stretch;			高さ方向均等割付けで配置(デフォ)
  align-content: flex-start;		高さ方向始点合わせで詰めて配置
  align-content: flex-end;			高さ方向終点合わせで詰めて配置
  align-content: center;			高さ方向中央合わせで詰めて配置	  中央揃え
  align-content: space-between;		最初の要素が左端に、最後の要素が右端に移動し、その間の要素は等間隔
  align-content: space-around;		上下等間隔均等割り付け

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

Flex Item 用

Flexにしたい要素に記述 → .flex_container .flex_item …クラス名は任意


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

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

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

//幅、高さを指定 (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; 

TOP