CODEWITHSUNDEEP
cssflexbox
Alex Bowyer
Alex Bowyer

Reputation: 691

How to align bottom "row" in flex box without affecting the others?

I have a problem. I have a table which I have implemented in flexbox. I want to make the bottom "row" aligned, without affecting the spacing of the other rows. (I put "row" in quotes because technically it's not rows, it's the last cell in three different columns)

Here's a screenshot of what I want to achieve: design I am trying to implement

Here is a JSFiddle of what I have so far. I thought maybe this bit would do it but it seems not:

div.new-region-page div.three-col-buys a.read-more {
  align-self: flex-end;
}

I have two main problems - getting the "See more" cells to align, and extending the vertical borders to the same length across all columns.

It's not an option to use flex rows instead of flex columns because of the way this has to collapse responsively in mobile.

Hope someone can advise how I can achieve this with flexbox. I tried various flex attributes with little success.

Upvotes: 0

Views: 757

Answers (1)

codebloo
codebloo

Reputation: 85

You have to set the columns container (#top-buys) to display:flex; to get all 3 columns the same height.

Once you do that you can adjust your column contents so they aren't all spread out from the space-between setting

If you add flex-grow:0; to the div.new-region-page a.read-more it will push it to the bottom.

Upvotes: 1

Related Questions