Let's flex!

flexを極めよう!～横向きスペース編～

一番外側の四角

background-color:#F6E7D8

height:120px

weight:80%

class名:big-box

class名:big-(数字)

justify-content:flex-start

左寄せ

高さ100px
#E3CAA5

幅100px
#CEAB93

margin
10px
#AD8B73

justify-content:center

中央寄せ

高さ100px
#E3CAA5

幅100px
#CEAB93

margin
10px
#AD8B73

justify-content: flex-end;

右寄せ

高さ100px
#E3CAA5

幅100px
#CEAB93

margin
10px
#AD8B73

justify-content:space-around

左右両端のスペースを含めて等間隔に配置

高さ100px
#E3CAA5

幅100px
#CEAB93

margin
10px
#AD8B73

justify-content:space-between

左右両端のスペースを埋めて等間隔に配置

高さ100px
#E3CAA5

幅100px
#CEAB93

margin
10px
#AD8B73

参考リンク

Flexboxで左寄せ・中央寄せ・右寄せを指定する方法