Question: I'd like to center a list of elements in a page without redimensioning the elements and at the same time, fit as much as possible in the same row.
I manage to do it with several @media rules for each screen size from 1 element per row up to 4 elements, but I'd like to know if there is a way to do it in a way that it would fit whatever the width of the page is.
Here is what I've tried and works:

```css
.container {
  display: flex;
  width: max-content;
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 294px) { .container {
  width: 290px;
}}
@media only screen and (min-width: 584px) { .container {
    width: 580px;
}}
@media only screen and (min-width: 874px) { .container {
    width: 870px;
}}
@media only screen and (min-width: 1164px) { .container {
    width: 1160px;
}}

.rectangle {
  width: 286px;
  height: 180px;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 24px;
  background: #aeaeae;
}
```

```html
<div class="container">
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
</div>
```

Answer: 
If I understood correctly you want to center all the items that fit on one line - then you can use `justify-content` to replace the media queries 

[**DEMO**](https://codepen.io/anon/pen/vjMNgO?editors=1100)

```
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

.rectangle {
  width: 286px;
  height: 180px;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 24px;
  background: #aeaeae;
}

```
```css
.container {
  display: flex;
  width: max-content;
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 294px) { .container {
  width: 290px;
}}
@media only screen and (min-width: 584px) { .container {
    width: 580px;
}}
@media only screen and (min-width: 874px) { .container {
    width: 870px;
}}
@media only screen and (min-width: 1164px) { .container {
    width: 1160px;
}}

.rectangle {
  width: 286px;
  height: 180px;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 24px;
  background: #aeaeae;
}
```

```html
<div class="container">
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
</div>
```