Submitted almost 3 years ago

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

kevinozyx• 10

@kevinozyx

Preview site View code

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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.

Community feedback

Joanne Wang• 135

@joanneccwang

Posted almost 3 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.

kevinozyx• 10

@kevinozyx

Posted almost 3 years ago

@joanneccwang thank you so much for that, really appreciate it :)

Please log in to post a comment

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