Submitted about 4 years ago

HTML CSS Practice - using basic CSS, CSS Flexbox, CSS Button Creator

@kevinozyx

A solution to the 3-column preview card component challenge

Solution retrospective

I am still new to HTML & CSS and I have only learned CSS Flexbox for this project for the first time. I have some questions that will be appreciated if someone can explain this or point me to the right direction:

How to master the use of flex container's width and its flex items width properties (static vs dynamic use)
Creating variables to change one variable instead of multiple variables manually
Alternative for IDs in HTML so that the code can be streamlined or compacted to avoid unnecessary codes and save time
Any tips to 'automate' the HTML/CSS process as it feels like the process is pretty tedious.

Code

Please log in to post a comment

Community feedback

Joanne Wang•205
@joanneccwang
Posted about 4 years ago
For flex-items, by given flex: 1 for each boxes, will give you the same effect to equally divide container's width into 3 columns. If you want to keep the 12rem to specify the min width of each column. flex: 1 0 12rem is what you're looking for. It stands for flex-grow: 1; flex-shrink: 0; flex-basis: 12rem. And for the same properties shared between each boxes, I'd suggest to define them in another class.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord