UNDERSTANDING CSS DISPLAY: FLEX WITH FLEXBOX FROGGY

avatar
(Edited)

Hi guys,

This is my first post on this community, I am a newbie frontend and Backend developer.
In this post i'll be sharing with you my experience on a programming game FLEXBOX-FROGGY which has been helpful for me in understanding the application of "Display: flex" on CSS

hive red logo.png

Screenshot 2022-07-05 092420.png

FlexboxFroggy set its display to flex, and uses its properties to set the frogs in the pond into their lilypads.

Screenshot 2022-07-05 104409.png

Programmers and newbies finds it difficult most times to arrange contents inside divs which has been a major issue for me also, flexbox froggy has helped me understand a few ways I can set my contents inside the divs with this game

Screenshot 2022-07-05 093000.png
hive red logo.png

Some of the Properties of Display: flex include;

  • justify-content: center, flex-end, flex-start, space-around, space-evenly
  • flex-direction: row, row-reverse, column, column-reverse
  • flex-flow: This option helps use flex-direction and flex wrap together using a shorthand property by spacing them from each other
  • align-item: flex-start, flex-end, center, baseline, stretch
  • order: This rearranges the order in which the color of the frogs are placed using integers (-1, 0, 1, 2 etc)
  • align-content: Aligns a flex container's lines within the flex container when there is extra space on the cross-axis its properties are flex-start, flex-end center, space-between, space-around, space-evenly, stretch.
  • flex-wrap: Helps to arrange squeezed items, its properties are: nowrap, wrap, wrap-reverse.
  • align-self: Same value as align-items and align-content but is applied only to individual item.

Screenshot 2022-07-05 123124.png

At the last stage of the game I was asked to arrange the frogs in their lilypads using the properties I have learnt, it was tedious at first but at last I got it.

Screenshot 2022-07-05 110818.png

I made use of flex-flow to apply the properties of both flex-direction and flex-wrap since the space given was limited, I also made use of align-content to share space-between the frogs and lastly justify-content to position them to the center.

Other games form Flexboxfroggy are:

text16.png

Until Next Time
Stay Coded✌️

programming development gamming archon ocd palnet neoxian game hive
0
0
0.000
6 comments
avatar

Yeah I know about this game but I haven’t played it. The one I play is by mastery games and that one is about fighting zombies with your skills in flexbox.

Check flexboxzombies by mastery games on google.

0
0
0.000
Reply
avatar

oh i havent play that one
i'll give it a trial

0
0
0.000
Reply
avatar

Congratulations @joebolite97! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):

You made more than 100 comments.
Your next target is to reach 200 comments.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

To support your work, I also upvoted your post!

Check out the last post from @hivebuzz:

Our Hive Power Delegations to the June PUM Winners
Feedback from the July 1st Hive Power Up Day
The 7th edition of the Hive Power Up Month starts today!
Support the HiveBuzz project. Vote for our proposal!
0
0
0.000
Reply
avatar

Hi! It's an interesting project.

BTW. Links 2, 3 and 4 at the end are the same. Also, when talking about the properties of display: flex and other things, add sources to them. It shouldn't be difficult since it's something rather standardized. It could help you better.

0
0
0.000
Reply