Topic: How to align md cards horizontally in <ul> using <li> elements?

I want to align cards horizontally using *ngFor tags in <li>, but somehow they keep aligning vertically. How do I align them? The link to my code is https://jsfiddle.net/bso7bsd5/. The cards will be received from the server and I want to align 3 cards in a row until I receive them from the server. How do I make it possible?

Rafał Rogulski free answered 5 years ago


Hi,   It's possible with flexbox, more information you can find here: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties   Regards  

Suraj Singh Bora , B.Tech., Mech. Engg., IIT (BHU), Varanasi (INDIA) free commented 5 years ago

Thank you, sir, for introducing me to flexbox. It is amazing. But I am facing another problem aligning card's image and card's content horizontally using flexbox. How do I perform this task?

Rafał Rogulski free commented 5 years ago

Give your li elements displa: flex and justify-content: center; this should work


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags