float

float:left
float:left

flexbox

display:flex

flexbox2

Flexアイテム
Flexアイテム

Flexコンテナ

実務で使いそうなプロパティ

横並びにしたい flex-direction:row

1
2
3
4
5
6

横並びを折り返したい flex-wrap:wrap;

1
2
3
4
5
6

水平中央寄せにしたい justify-content:center;

1
2
3

均等に配置したい justify-content:space-between;

1
2
3

垂直中央寄せにしたい align-items:center;

1
2
3

上下左右中央寄せにしたい align-items:center;× justify-content:center;

1
2
3

右寄せ左寄せを混合させたい justify-content:flex-end; +

1
2
3

縦並びにしたい flex-direction: column;

1
2
3

均等に配置で枠の左右にも余白を持たせたい justify-content:space-around;

1
2
3

プロパティ説明

flex-direction

row

1
2
3
4

row-reverse

1
2
3
4

column

1
2
3
4

column-reverse

1
2
3
4

flex-wrap

row

1
2
3
4
5
6

row-reverse

1
2
3
4
5
6

column

1
2
3
4
5
6

justify-content

flex-start

1
2
3
4

flex-end

1
2
3
4

center

1
2
3
4

space-between

1
2
3
4

space-around

1
2
3
4

align-items

flex-start

1
2
3
4

flex-end

1
2
3
4

center

1
2
3
4

baseline

1
2
3
4

stretch

1
2
3
4

align-content

flex-start

1
2
3
4
5
6
7
8

flex-end

1
2
3
4
5
6
7
8

center

1
2
3
4
5
6
7
8

space-between

1
2
3
4
5
6
7
8

space-around

1
2
3
4
5
6
7
8

order

order

1order:5
2order:3
3order:1
4order:6
5order:4
6order:2