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
FlexboxFroggy set its display to flex, and uses its properties to set the frogs in the pond into their lilypads.
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
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.
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.
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:
Until Next Time
Stay Coded✌️