1

I'm trying to center the wrapper, but have the actual tiles flex-start. Something like this:

enter image description here

While the overall container is centered.

How can I make the tiles flex-start, but have wrapper centered? Here's the code:

JSFiddle

#wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.tile {
  height: 100px;
  width: 100px;
  background-color: orange;
  border: 1px solid black;
}
<div id="wrapper">
  <div class="tile">1</div>
  <div class="tile">2</div>
  <div class="tile">3</div>
  <div class="tile">4</div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Jessica
  • 9,379
  • 14
  • 65
  • 136
  • Would changing `justify-content: center` to `margin: 0 auto` and setting a max-width equal to the width of three boxes work for you? – cjl750 Dec 07 '16 at 00:23
  • @cjl750 I can't make the max-width equal to anything, because I want it to be responsive – Jessica Dec 07 '16 at 00:41

0 Answers0