0

I have rows of cards. Each card is 

 display: flex;
 flex-direction: column;

A row is also flex layout as so: 

display: flex;
align-items: stretch;
flex-wrap: wrap;
justify-content: space-between;

so that all cards are of equal height.

The problem is how to align content across different cards horizontally. It happens naturally if the content is all the same height (effectively) however if content is of varying height, things don't line up.

enter image description here

Is there a way (without setting heights) to align content horizontally?

This plunker demonstrates the problem. Open in full screen to see the row of cards unwrapped. The "summary" headings would ideally all be aligned horizontally. http://plnkr.co/edit/zv6qBu0DfpK1Zq7Oe58M?p=preview

Thanks

Brian
  • 3,850
  • 3
  • 21
  • 37
John
  • 191
  • 1
  • 15
  • can you post the html/css you're using so we have a [mcve]? – Michael Coker Jun 19 '17 at 18:31
  • woops, sorry. Plunker link added. – John Jun 19 '17 at 18:35
  • 2
    Thanks. I don't think you can do that without setting a height or flex-basis on the flex items in `.iccard-content.flex-col.jc-fx-st` – Michael Coker Jun 19 '17 at 18:44
  • 1
    You need to do something like this [css-only-solution-to-set-multiple-same-height-row-sections-on-a-responsive-grid](https://stackoverflow.com/questions/44129135/css-only-solution-to-set-multiple-same-height-row-sections-on-a-responsive-gri/44164542#44164542), or a script – Asons Jun 19 '17 at 19:20

0 Answers0