2

I'm trying to make a grid that is ultimately center aligned but where the items are left and top aligned.

Here's a reproduction: http://jsfiddle.net/Ae8Wv/1306/

I thought that creating 1 parent container, with either text-align: center or display: flex; justify-content: center; and then adding a child container with the style display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row wrap; and then adding a bunch of child items with fixed widths would result in what I was looking for.

but it looks like the flex container handling the list of items doesn't take on an auto width of the longest widths of one of the rows but rather expands to the max width possible due to I'm guessing the fact that before wrapping the width was 100%+++++

Is there a solution to this?

It looks like there isn't due to this answer showing the same problem: Centered Grid - Inner Grid align left - NO Javascript - NO Medias Queries

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
J Doe
  • 109
  • 2
  • 12
  • check this question https://stackoverflow.com/questions/47479571/how-to-center-block-of-inline-blocks we face similar issue there, maybe you will get some ideas – Temani Afif Dec 22 '17 at 08:01

1 Answers1

1

It seems you're bit confused with main-axis and cross-axis while working with flexbox.

Use flex-direction: row and justify-content: center to center horizontally without taking 100% width(default).

OR

Use flex-direction: column and align-items: center to center horizontally without taking 100% width(default).

Hope this helps!!!

http://jsfiddle.net/Ae8Wv/1307/

VarunDevPro
  • 346
  • 2
  • 11
  • I'm sorry I wasn't more clear but I'm trying to achieve an equal width on either edge of the purple grid, inside the orange square, so that the orange square has equal lengths between each first and last square of each row. Sorry to be a waste of time – J Doe Dec 22 '17 at 05:25
  • http://jsfiddle.net/Ae8Wv/1310/ Check this once – VarunDevPro Dec 23 '17 at 07:10