Hello, I'm Maneshwar. I’m building LiveReview, a private AI code review tool that runs on your LLM key (OpenAI, Gemini, etc.) with highly competitive pricing -- built for small teams. Do check it out and give it a try!
So today I was working on Free DevTools’s base layouting and let me tell you—
I fought… I cried… I rage-refreshed Chrome like 200 times.
And still, the layouts didn’t listen.
At some point, I said:
“Enough, I’m learning Flex today!”
And then I stumbled upon this gem of a site — Flexbox Froggy.
Turns out, Flexbox is less like CSS and more like a frog training bootcamp.
So here’s a small write-up of my adventure… and you tell me later:
What’s your flex level?
Level 1: The Baby Flex 🍼
Guide this frog to the lilypad on the right. All you need is justify-content.
flex-start: Items align to the left side of the container.
flex-end: Items align to the right side of the container.
center: Items align at the center of the container.
space-between: Items display with equal spacing between them.
space-around: Items display with equal spacing around them.
#pond {
display: flex;
???
}
#pond {
display: flex;
justify-content: end;
}
First flex, first win. Confidence = 200%.
Level 2: The Centered Zen 🧘
Now, the frogs want peace and balance in the middle. All you need is justify-content.
flex-start: Items align to the left side of the container.
flex-end: Items align to the right side of the container.
center: Items align at the center of the container.
space-between: Items display with equal spacing between them.
space-around: Items display with equal spacing around them.
#pond {
display: flex;
???
}
#pond {
display: flex;
justify-content: center;
}
The pond is calm. The frogs are centered. Life is good.
Level 3: The Space Explorers 🚀
This time, the lilypads want personal space. Like, proper social distancing. All you need is justify-content.
#pond {
display: flex;
???
}
#pond {
display: flex;
justify-content: space-around;
}
Frogs invented Flexbox in 2020, confirmed.
Level 4: Equality Activists ✊🐸
Lilypads are demanding equal spacing between them.
No favorites, no bias, just pure fairness.
#pond {
display: flex;
???
}
#pond {
display: flex;
justify-content: space-between;
}
Flexbox = democracy.
Level 5: Gravity Testing 🔽
The frogs suddenly want to chill at the bottom.
For this, we use align-items.
flex-start: Items align to the top of the container.
flex-end: Items align to the bottom of the container.
center: Items align at the vertical center of the container.
baseline: Items display at the baseline of the container.
stretch: Items are stretched to fit the container.
#pond {
display: flex;
???
}
#pond {
display: flex;
align-items: flex-end;
}
Proof: frogs are denser than water.
Level 6: The Perfect ❤️
Sometimes frogs just want to meet in the middle. Use a combination of justify-content and align-items.
#pond {
display: flex;
???
???
}
#pond {
display: flex;
align-items: center;
justify-content: center;
}
Dinner for two, lilypad style.
Level 7: Space & Chill 🛋️
More frogs, more drama. Some want space, others want to hang low.
Use a combination of justify-content and align-items.
#pond {
display: flex;
???
???
}
#pond {
display: flex;
align-items: flex-end;
justify-content: space-around;
}
Compromise level: pro.
Level 8: The Rebel Row 🔄
The frogs just decided:
“Nope, let’s flip the order.”
Use flex-direction.
row: Items are placed the same as the text direction.
row-reverse: Items are placed opposite to the text direction.
column: Items are placed top to bottom.
column-reverse: Items are placed bottom to top.
#pond {
display: flex;
???
}
#pond {
display: flex;
flex-direction: row-reverse;
}
Chaos, but make it CSS.
Level 9: Going Vertical 🏋️♂️
Help the frogs find their column of lilypads using flex-direction.
- row
- row-reverse
- column
- column-reverse
#pond {
display: flex;
???
}
#pond {
display: flex;
flex-direction: column;
}
Yoga frogs.
Level 10: Reverse Psychology 🪞
Help the frogs get to their own lilypads. Although they seem close, it will take both flex-direction and justify-content.
⚠️ Remember: when you set the direction to a reversed row or column, start and end are also reversed.
#pond {
display: flex;
???
???
}
#pond {
display: flex;
flex-direction: row-reverse;
justify-content: start;
}
Frogs trolling developers since Level 10.
... (and so on, till the final boss 🐉)
Level 24: The Final Flex Boss 👑
I flexed it all the way to Level 24, whats your flex level comment below
You’ve made it here. You’ve bent, reversed, wrapped, centered, and justified every frog in existence. Bring the frogs home one last time.
- justify-content
- align-items
- flex-direction
- order
- align-self
- flex-wrap
- flex-flow
- align-content
#pond {
display: flex;
???
???
???
}
#pond {
display: flex;
flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between;
}
You are now… a Flex Master. 🧙♂️
Here’s your complete outro tightened up, formatted, and made reader-friendly while keeping your tone intact:
So… What’s Your Flex Level?
I flexed it all the way to Level 24.
What about you? Drop your flex level in the comments 👇
Flex responsibly, friends.
Also, check out LiveReview
LiveReview helps you get great feedback on your PR/MR in a few minutes.
Saves hours on every PR by giving fast, automated first-pass reviews. Helps both junior/senior engineers to go faster.
If you're tired of waiting for your peer to review your code or are not confident that they'll provide valid feedback, here's LiveReview for you.
SOCIAL SHARE CARD GENERATOR