Let's flex!

flexを極めよう!~折り返しスペース編~

一番外側の四角

background-color:#F6E7D8

height:350px

weight:60%

class名:big-box

class名:big-(数字)

まず、flex-wrap: wrap;を設定する

これは折り返すときに効力を発揮するcssです!

align-content: flex-start;

上寄せ(デフォルト)

No.1
高さ100px
#E3CAA5

No.2
幅200px
#CEAB93

No.3
margin 10px
#AD8B73

No.4
#FFC5C5

No.5
#C7DCA7

No.6
#89B9AD

align-content: flex-end;

下寄せ

No.1
高さ100px
#E3CAA5

No.2
幅200px
#CEAB93

No.3
margin 10px
#AD8B73

No.4
#FFC5C5

No.5
#C7DCA7

No.6
#89B9AD

align-content: center;

真ん中寄せ

No.1
高さ100px
#E3CAA5

No.2
幅200px
#CEAB93

No.3
margin 10px
#AD8B73

No.4
#FFC5C5

No.5
#C7DCA7

No.6
#89B9AD

align-content: space-between;

上下両端寄せ

No.1
高さ100px
#E3CAA5

No.2
幅200px
#CEAB93

No.3
margin 10px
#AD8B73

No.4
#FFC5C5

No.5
#C7DCA7

No.6
#89B9AD

align-content: space-evenly;

上端・要素間・下端の余白をすべて同じ大きさに

No.1
高さ100px
#E3CAA5

No.2
幅200px
#CEAB93

No.3
margin 10px
#AD8B73

No.4
#FFC5C5

No.5
#C7DCA7

No.6
#89B9AD