DEV Community

Cover image for Understand Float and Flexbox in Comparison with Books.πŸ“š
Manas Moon
Manas Moon

Posted on

Understand Float and Flexbox in Comparison with Books.πŸ“š

Before diving deep into the topic, Float and Flexbox in one line:πŸ‘‡πŸ»

Float and Flexbox are two ways to put things side by side on a webpage.

Like arranging books on a shelf!πŸ“š

Floats are like magic magnets that stick elements next to each other.
But sometimes they act tricky and need extra commands to behave!

Flexbox is designed to make arranging things easy-peasy,
Like putting books in neat rows and columns.

With Floats, you gotta set sizes for everything, which can be a bit confusing.
It's like measuring each book's width and height before placing them!

Flexbox automatically adjusts sizes and positions,
Like a super flexible bookshelf that moves things around to fit!

Floats sometimes struggle with making all books on the shelf the same height.
It's like some books grow taller and others stay short!

But Flexbox solves this!
It's like magic making all books the same height, so your shelf looks neat and tidy!

With Floats, making things look good on phones and tablets can be tricky.
It's like rearranging books for different bookshelves!

But Flexbox is naturally good at fitting things into different spaces.
It's like a shape-shifting bookshelf that adjusts for any room!

In short, Floats are like old-school magic tricks, while Flexbox is the modern superhero making web layouts a breeze!

A personal tip,
You don't have to learn all these properties,
Understand the basics and PRACTICE by making projects.

If you find this short blog useful,
Follow @manasmoon_ for more such tips and tricks.
And take your projects to the next level! πŸ’»βœ¨

Top comments (0)