Responsive Order Summary page using SCSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,020

  @MelvinAguilar

  Posted over 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I agree with you.

  • "While I didn't give height to the parent container (now body), the justify-content didn't work."

    When the flex-direction is set to column, the justify-content property is used to align the child elements along the vertical (column) axis. The center value of the justify-content property will center align the child elements vertically within the container.

    However, if the height of the flex container is not defined, the height of the container will be determined by the height of its child elements and the child elements will not have a reference point to be vertically centered. Without a defined height, the browser will not know how to position the child elements within the container and the justify-content: center; will have no effect.

    So in order to center align the child elements when using flex-direction: column, the container should have a defined height, so the child elements have a reference point to be aligned to. Once the height is set then, the justify-content: center; will take effect and align the child elements vertically in the center of the container.

  • To horizontal center without flex-wrap use align-items: center; instead of align-content: center;

  I hope you find it useful! 😄

  Happy coding!

  10

  Marked as helpful