DEV Community

loading...

Flexbox for CSS

Ngan Kim Khong
Hi! I'm currently a software engineer intern! I am looking to post some blogs about what I'm learning :)
・2 min read

I have been using libraries like Bootstrap and Bootswatch for all my CSS since the bootcamp. I understand very its pros and cons of using libraries as a beginner and not understand CSS throughly, because eventhough the libraries work just fine, many are flaws and duplicated and unecessary codes and logic happens. I'm quite happy to know that in my internship, we will be working with pure CSS, or just SASS. Although, we're still using a design library: Ant Design.

The first thing about pure CSS that I was instructed to learn, is the flexbox concept. Mind you, it's nothing new and fancy. I've heard about it many times but never really truly spend time to understand it. A quick note here from CSS tricks actually did not helped me much. I've tried using the Row and Column properties on my libraries, and they caused a lot of troubles, even when they're working. Every time I get a bug, I would just google a quick fix. Partly because the time was tense and I got no reason to dig deeper since things are working. For a long time, I couldn't tell the difference between justity-content and align-items properties. I can do CSS, but I am not confident in it as I don't know why, when, and how sometimes my CSS doesn't work the way it supposed to be. Not just I understand clearly how and when to use justify-content vs. align-items vs. self-align vs. flex-direction vs. flex-flow, I can always go back to the game, which is really simple and will get the complicated concept right away, instead of reading bare text which doesn't make sense to me.

Now that I only spent 15 minutes playing this Flexbox game, I regret not knowing this sooner, and very much appreciate that my internship introduced me to learn about Flex box more throughly. As I am feeling more confident about CSS after this small game, I really encourage everyone to try it, the sooner you understand flexbox, the easier for you to code and debug CSS, because, you know, sometimes Google and Stack Over Flow gives you a shallow solutions but not teaching you the core issues that might cause more troubles as you go on :)

Discussion (0)

Forem Open with the Forem app