Let's flex!

flexを極めよう!～方向変更編～

一番外側の四角

background-color:#F6E7D8

height:300px

weight:60%

class名:big-box

class名:big-(数字)

flex-direction: row;

左から右(デフォルト)

高さ80px
#E3CAA5

幅120px
#CEAB93

margin 10px
#AD8B73

flex-direction: row-reverse;

右から左

高さ80px
#E3CAA5

幅80px
#CEAB93

margin 10px
#AD8B73

flex-direction: column;

上から下（縦向き）

高さ80px
#E3CAA5

幅80px
#CEAB93

margin 10px
#AD8B73

flex-direction:column-reverse;

下から上

高さ80px
#E3CAA5

幅80px
#CEAB93

margin 10px
#AD8B73

参考リンク

flex-direction - CSS: カスケーディングスタイルシート | MDN