Flex Box

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

参考: よく使うフレックス

フレックスにする


  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; }
			

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

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


  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-direction: row;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

flex-direction: row-reverse;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

flex-direction: column;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

flex-direction: column-reverse;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

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


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

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

D

EE

FFF

GG

flex-wrap: nowrap; overflow: hidden;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

D

EE

FFF

GG

flex-wrap: wrap;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

D

EE

FFF

GG

flex-wrap: wrap-reverse;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

D

EE

FFF

GG

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

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


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

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

justify-content: center;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

justify-content: flex-end;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

justify-content: space-between;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

justify-content: space-around;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

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

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


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

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

align-items: flex-start;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

align-items: center;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

align-items: flex-end;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

align-items: baseline;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

   ↑…効いてないね…

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

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

アイテムが 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;
align-content: stretch;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

DDDD

EE

FFFFFF

align-content: flex-start;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

DDDD

EE

FFFFFF

align-content: center;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

DDDD

EE

FFFFFF

align-content: flex-end;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

DDDD

EE

FFFFFF

flex-wrap: wrap;
flex-direction: column;
align-content: space-between;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

DDDD

EE

FFFFFF

align-content: space-around;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

DDDD

EE

FFFFFF

align-content: space-evenly;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

DDDD

EE

FFFFFF

flex-wrap: wrap-reverse;
align-content: stretch;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

DDDD

EE

FFFFFF

align-content: flex-start;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

DDDD

EE

FFFFFF

align-content: center;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

DDDD

EE

FFFFFF

align-content: flex-end;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

DDDD

EE

FFFFFF

flex-wrap: wrap-reverse;
flex-direction: column;
align-content: space-between;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

DDDD

EE

FFFFFF

align-content: space-around;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

DDDD

EE

FFFFFF

align-content: space-evenly;

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

DDDD

EE

FFFFFF

ショートハンド


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

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

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

DDDD

EE

FFFFFF

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


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

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

CCCCCC
CCC
C
CCCCCC

フレックスボックスの中身の要素(アイテム)に対して記述

アイテムの表示の順番


orderで指定がなければ1番初めに記述されたアイテムが0(デフォルト)、同じ値なら記述された順
  order: 0;			1番初めに記述されたアイテムが0(デフォ)
  order: -1;		0より1つ左に表示する
  order: 1; 		0の1つ右に表示する
  order: 2;			0の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;}

A

B

C

D

アイテムの幅(マイナスは無効)


  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;}

A

B

C

D

幅の縮小率 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;}

A

B

C

D

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;}
flex-direction: row;

A

B

C

D

E

F

flex-direction: column;

A

B

C

D

E

F

幅、高さを指定 (width, height と同じ)


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

p { flex-basis: 10rem;}
flex-direction: row;

AA

B

C

D

flex-direction: column;

A
A

B

C

D

ショートハンド


  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
	
flex: 0 1 auto;

AA

B

C

flex: 1 1 100px;

A
A

B

C

アイテムのセンタリング - FLEX


コンテナ … 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;
	}
		

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC

アイテムのセンタリング - Position


div {
	position: relative;
	}
/*B*/  div p:nth-child(2) {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}
		

AAAA
AAAA

BB

CCCCCC
CCCCCC
CCCCCC
CCCCCC


TOP