Skip to content
Submitted 5 months ago

Beginner Flexbox Four Cards Component

Marvin•80
@elMarMar
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud that my solution seems pretty spot-on. However, I think my code is a little disorganized since I'm still learning flexbox. As I continue to learn flexbox's properties, I believe I'll be able to more elegantly and efficiently code these front end sites.

What challenges did you encounter, and how did you overcome them?

I still don't perfectly understand certain flexbox properties. For example, flex-basis is still a fuzzy concept for me. It's the default size of an element based on what? When does it shrink/grow from that size.

What specific areas of your project would you like help with?

I would like to know if I used flexbox efficiently. Sometimes it feels like I'm abusing flexbox, but I'm struggling to my head around other methods that could better position my elements.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Huy Phan•3,430
    @huyphan2210

    Hi @elMarMar,

    I've reviewed your solution and would like to share my thoughts:

    • The properties flex-grow, flex-shrink, and flex-basis are meant to be applied to the children of a Flexbox container, not the container itself. Therefore, you can remove these properties from your <main> element.
    • flex-basis should be used with CSS units (e.g., flex-basis: 200px). When you set flex-basis: 200px, it means that the flex item will have an initial width of 200px (or height if flex-direction: column is applied on the Flexbox) unless its content requires more space.
    • If the content exceeds this size, whether it overflows or shrinks depends on the flex-shrink property. This property controls how much the item should shrink to fit within the container when there isn’t enough space.
    • flex-grow determines how much a flex item should expand to fill any remaining space in the container, after flex-basis is accounted for. Items with higher flex-grow values will take up more of the available space.

    If you're concerned about using Flexbox too much, consider exploring other layout techniques like CSS Grid, which can be more suitable depending on the layout requirements.

  • Peter Forster•170
    @peterforster10

    looks quite good

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