Skip to content
Submitted almost 2 years ago

Order Summary using Flexbox.

Santiago Gonzalez•20
@santigo-zero
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I found aligning the image and the flex items below a little bit difficult and I still don't use flexbox fluently, in terms of spacing, are there any easy ways of managing spacing better than what I did? I've used a lot of margin-bottom, padding-bottom in other pages(not just this challenge) and I don't think that's a clean solution for aligning items.

Community feedback

  • Rachel Johnson•510
    @rachelktyjohnsonPosted almost 2 years ago

    Hey Santiago, thanks for sharing your solution and question!

    You did a REALLY good job in getting the design to match up exactly to the mockup! Super impressed.

    Disclaimer, this is my view on things and others may have other solutions and thoughts! I think it's essential to think about alignment and spacing differently. For a layout like this, alignment is for the vertical alignment of the design (centring things along a vertical line). Spacing wouldn't be achieved by flexbox unless the card itself has fixed height. Spacing elements vertically in a container with fluid height would require the use of margins.

    I hope this helps!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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