How to justify content with space-between AND have everything centered?

Question

I'm running into a problem with flexbox.

I have a div that has a max-width of 920px. I want the boxes of content to fill up the div from left to right to the max possible width, with everything having equal margins. When the screen-size goes down to one box per row, I want that box to be centered on the screen.

Here is the site in action: http://javinladish.com/code/index.html

If I use:

justify-content: center; 

Then the boxes don't fill up the max width.

If I use:

justify-content: space-between; 

Then the boxes don't stay centered when I go down to one box per row.

How can I achieve a happy balance between the two? I.e filling up the max width of the container, and keeping all content centered?

Answer 1

The best solution would be to use margin: auto; on the flex items horizontal margins as follows:

    .flexbox {         background-color: pink;         display: flex;         justify-content:  space-between;         flex-wrap: wrap;      }      .flex-item {         width: 175px;         height: 175px;         background-color: grey;         margin: 10px auto;      }

    <div class="flexbox">         <div class="flex-item"></div>         <div class="flex-item"></div>         <div class="flex-item"></div>         <div class="flex-item"></div>         <div class="flex-item"></div>         <div class="flex-item"></div>         <div class="flex-item"></div>      </div>

The only problem might be if the last row would have more than one item but not enough to fill up the whole row, there will be a lot of space between the last row items.

Answer 2

Seems you're after two behaviours at once. I've had success with justify-content: center and flex-wrap: wrap on the container, and setting an appropriate left and right margin on the children. Then apply that same amount as a negative margin on the container, and the edges of the children will line up with the container.

.parent {     display: flex;     flex-direction: row;     justify-content: center;     flex-wrap: wrap;     margin: 0 -3rem; }  .child {     align-self: center;     margin: 0 3rem 6rem 3rem; }