Bermain Dengan Flexbox

闪回

ada tulisan saya Mengenal CSS Flexible Box yang lalu,saya sedikit menjabarkan mengenai apa itu flexbox ,kegunaan dari flexbox ,konsep dasarnya dan juga salah satupropertinya yaitu align-content 。 Kali ini saya akan melanjutkan tulisan saya sebelumnya,masih mengenai flexbox namun dari sisi yang sedikit berbeda dan semoga lebih menyenangkan bagi kita untuk mempelajari dan mempraktekkan flexbox

Saya belajar tentang flexbox belum喇嘛。 Ketika awal saya membaca dan mempelajarinya,saya mencoba untuk mempraktekkan penggunaan beberapapropti flexbox dan semuanya nampak mudah — memang mudah karena saya mencoba beberapaproperti sambil membaca dokumentasinya。 Beberapa minggu kemudian ada seorang teman yang bertanya tentang suatu kasus dan saya tahu bahwa hal tersebut bisa diselesaikan menggunakan flexbox dan apa yang yang terjadi kemudian吗? Saya harus mencari dokumentasi lagi mengenai flexbox karena apa yang sudah saya baca dan praktekkan beberapa minggu yang lalu sudah tidak ada lagi dalam ingatan saya。

贝拉哈尔·桑比尔·贝尔曼

Ada 2网站Yangsaya Temukan ketika mencari-cari Referensi mengenai flexbox yaitu Flexbox Froggy Flexbox防御

Di Permainan Flexbox Froggy kita akan membantu Froggy dan teman-teman kataknya untuk sampai diatas daun tanaman lili yang sesuai di sebuah kolam。 Di permainan ini kita akan dikenalkan dan mempraktekkan beberapaproperti flexbox。

Ada 24 电子邮件 。 Berikut ini adalah tampilannya:

Permainan yang kedua adalah Flexbox防御 。 Pada permainan yang kedua ini kita harus menghentikan laju musuh琼脂tidak melewati garis pertahanan kita。 Sama seperti di permainan pertama tadi,di dalam permainan ini kita akan dikenalkan dan mempraktekkan beberapaproperti flexbox。

Pada permainan ini hanya ada 12 tingkatan permainan,namun cukup menantang dan bisa membantu untuk mengingat beberapaproperti flexbox。 Berikut ini tampilan dari Flexbox防御

Pada dua permainan tersebut kita diajak untuk lebih mengenal dan mengetahui bagaimana efek suatupropti flexbox apabila dikenakan pada suatu elemen HTML。 贝里库特·尼·达拉·贝雷塔·贝塞塔·尼莱·达里·贝雷塔里·塞伯里

#证明内容

值: flex-start | flex-end | center | space-between | space-around flex-start | flex-end | center | space-between | space-around

#align-items&align-self

值: flex-start | flex-end | center | baseline | stretch flex-start | flex-end | center | baseline | stretch

#flex-direction

值: row | row-reverse | column | column-reverse row | row-reverse | column | column-reverse

#顺序

#flex-wrap

值: nowrap | wrap | wrap-reverse nowrap | wrap | wrap-reverse

#flex-flow

#align-content

值: flex-start | flex-end | center | space-between | space-around | stretch flex-start | flex-end | center | space-between | space-around | stretch

Dengan memainkan permainan ini semoga散文belajar dan mengingatproperti-properti flexbox menjadi lebih mudah。 Selamat mencoba。