Menu

Post image 1
Post image 2
Post image 3
Post image 4
Post image 5
1 / 5
0

Understanding Sizing in CSS Flexbox (A Practical Guide)

DEV Community·Abdulmujeeb Mohammed·about 1 month ago
#LuhUdnac
#beginners#flex#axis#width#height#flexbox
Reading 0:00
15s threshold

The first time I really tried to understand sizing in Flexbox, I got stuck. Not because I didn’t understand width and height .Not because I didn’t know flex-grow or flex-shrink . But because everything I thought I knew about sizing suddenly stopped applying . In normal layout, things feel predictable: Block elements fill width Height depends on content width and height behave like firm instructions Then Flexbox shows up… and starts bending those rules. The Moment Things Started Breaking I remember setting width on a flex item and expecting it to behave normally.It didn’t.Then I tried adjusting height . Still weird. Then I added align-items , and suddenly things stretched in ways I didn’t expect. At that point, it felt like: “Flexbox doesn’t respect width and height.” But that’s not true. Flexbox does respect them — just not in the way we’re used to. What up with Flexbox? Flexbox doesn’t think in horizontal vs vertical It thinks in main axis vs cross axis And once I accepted that, things started making sense.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More