DEV Community

Mikey
Mikey

Posted on

It's been a week and I'm still stuck

I wrote a post a week or so ago about Flexbox and I'm still not getting it.

I'm trying to work through The Odin Project and I'm at the end of the CSS Fundamentals and before moving on to the next section the last project is designed around Flexbox. It also seems that FB is quite instrumental in front-end. I don't know what it is that I don't understand but I've read so many materials and watched so many tutorials and tried to do it but I just can't seem to get it.

I don't want to give up because I actually like doing it but I can't get past this part and I feel like it's essential to at least be able to do it.

I've had this same issue with several other resources I've tried to work through.

Anyone got any suggestions or am I trying to flog a dead horse?

Top comments (2)

Collapse
 
miloloaf profile image
Miloloaf

I found this tool useful for visual learners like myself. I forget all the types of properties once it get's a little more complex but when it's laid out like this, it seems to make a lot more sense.

flexbox.malven.co/

As a beginner, I also find it useful to think about it like this "Where do I want my elements and where do I want my elements to start from? Left, Right, Top, Bottom, Centre?" I haven't gone through TOP so I won't know the specific section you are referring to. But all in all to simplify it, flex boxes are best for "single line" displays that are uniform eg Menu Bars. If you want 2d arrays, you might want to look into grids.

Collapse
 
m1keym profile image
Mikey

Thank you for that, I'll take a look. I find that I have a pretty decent grasp on things like 'justify-content' and such most of the time then I get really confused around flex grow/shrink/basis then everything I do know goes out of the window.

The part of TOP I'm doing could probably be done with grid and I actually like grid and could do it, but this is a flexbox exercise so I feel like there is a reason for me having to learn how to do it with flexbox.

Thank you for taking the time to respond and for the link at a glance it looks really useful!