CSS/flexbox

display: flex;
display: inline-flex;
全体を囲む要素に指定

flex-direction:
row; 左から右へ
row-reverse; 右から左へ
column; 上から下へ
column-reverse; 下から上へ
 
flex-wrap:
nowrap; コンテナの幅に収まるように縮小され横一列に配置
wrap; 左から右へコンテナの幅には入りきらない要素は下へ
wrap-reverse; 左から右へコンテナの幅には入りきらない要素は上へ

justify-content:
flex-start; コンテナの左側に詰めて配置
flex-end; コンテナの右側に詰めて配置
cener; コンテナの中央に配置
space-between; 最初と最後は両端に、残りは等間隔で配置
space-around; すべてを等間隔に配置

align-items:
stretch; コンテナの高さで配置
flex-start; 左上詰めで配置
flex-end; 左下詰めで配置
center; 左詰めの中央配置
baseline; ベースラインに沿って配置

align-content:
stretch; 縦の間隔にスペース
flex-start; スペースなし
flex-end; コンテナ下部に詰まるように詰めて始まる
center; 中央に詰めて配置
space-between; コンテナ縦両端詰めになるように縦にスペース
space-around; 縦等間隔

order: -1;
各アイテムに順番を設定

flex-grow: 1;
他のアイテムより数字を大きく指定のアイテムだけ大きくとる

flex-shrink: 0;
数字の分だけオリジナルサイズより縮小

flex-basis: 300px;
autoがオリジナル値

.div01, .div02, .div03, .div04, .div05, .div06, .div07, .div08, .div09 {
	width: 100px;
	height: 100px;
}
#container01 {
	width: 100%;
	height: 500px;
	background: black;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: space-around;
}
#container01 .div01 {
	background: pink;
	order: 1;
}
#container01 .div02 {
	background: green;
	flex-grow: 1;
}
#container01 .div03 {
	background: yellow;
	flex-basis: 200px;
}
#container01 .div04 {
	background: blue;
	order: -1;
}
#container01 .div05 {
	background: red;
	flex-grow: 5;
}
#container01 .div06 {
	background: purple;
}
#container01 .div07 {
	background: gray;
}
#container01 .div08 {
	background: orange;
}
#container01 .div09 {
	background: #890833;
}