【答え】FLEXBOX FROGGY

  • 2021年7月11日
  • SE
SE

こんにちは、SEパパブログのトト(@totowaenjineer)です。

 

 

 

 

html、cssの勉強をしている人で知っている人が多いかもです。

 

 

 

 

webページのレイアウトを決めるときに、

flexboxを利用したことありますよね。

 

 

 

 

知らない方はぜひやってみてください。

 

 

 

カエルを動かしながら、flexboxを学べちゃいます。

 

ここからどうぞ。

 

 

 

 

1点注意ポイントがあって、答えがわからないんです。

 

 

 

 

何度がやっていると同じところの答えが分からなくなって、

調べてたので答えを載せておきます。

 

 

No.1

justify-content: flex-end

 

No.2

justify-content: center

 

No.3

justify-content: space-around

 

No.4

justify-content: space-between

 

No.5

align-items:flex-end

 

No.6

justify-content: center;
align-items: center

 

No.7

justify-content: space-around;
align-items: flex-end

 

No.8

flex-direction: row-reverse

 

No.9

flex-direction: column

 

No.10

flex-direction: row-reverse;
justify-content: flex-end

 

No.11

flex-direction: column;
justify-content: flex-end;

 

No.12

flex-direction: column-reverse;
justify-content: space-between

 

No.13

flex-direction: row-reverse;
justify-content: center;
align-items: flex-end

 

No.14

order: 1;

 

No.15

order: -1

 

No.16

align-self: flex-end

 

No.17

order: 1;
align-self: flex-end

 

No.18

flex-wrap: wrap

 

No.19

flex-direction: column;
flex-wrap: wrap

 

No.20

flex-flow: column wrap

 

No.21

align-content: flex-start

 

No.22

align-content: flex-end

 

No.23

flex-direction: column-reverse;
align-content: center

 

No.24

flex-direction: column-reverse;
flex-wrap: wrap-reverse;
justify-content: center;
align-content: space-between;

 

 

 

まとめ

いかがでしょうか。

 

 

 

 

html・cssをマスターするためにflexboxは必須です。

 

 

 

 

サクッと身に付けちゃいましょう。

 

 

 

 

それではまた。