I just want to take a moment and celebrate a pretty big moment for me. I have been attempting to use flexbox on and off for months now, and having some success here and there, but relying more on React component libraries like Material UI (my favorite!) which has a lot of flex properties built in.
Today I opened up a recent Codesandbox and reworked the layout with responsive rows and columns. And it finally clicked!
Do you ever have that moment where something becomes clear in your minds' eye and not just an abtract idea? Now I literally can visualize the CSS for different types of flex layouts.
This card I made below features rows and columns inside the card, and the cards themselves are placed in a series of rows and columns, depending on the screen size.
Tomorrow I am going to write the article about HOW I did it. But today I am going to celebrate my personal victory and enjoy the rest of my evening!!
(A big thank you to Flexbox Froggy for helping me understand and visualize the concepts.)
Be sure to check out my latest post on how I created the layout with Flexbox: Flexbox Rocks!