Fixed column width flexbox fluid

Question

I have a container configured through flexbox. I would like to evenly distribute each of the tiles inside the container, but keep them at a fixed width of 220 pixels.

I came closer, using flex-growand installing min-width: 220px, but obviously, computationally resized the tiles to fill the container.

I also set up several media queries so that the tiles flow to specific breakpoints.

With my current style, is it possible to keep these tiles at 220 pixels without stretching them? Can this be done via flexbox? Is there an alternative that is as good as flexbox?

Fiddle

.container {
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 2000px;
}
.tiles {
  border: 1px solid black;
  margin: 0 15px 30px 15px;
  flex-grow: 1;
  padding: 0;
  height: 220px;
  min-width: 220px;
}
@media screen and (max-width: 1140px) {
  .container {
    max-width: 850px;
  }
}
@media screen and (max-width: 2040px) {
  .container {
    max-width: 1750px;
  }
}
@media screen and (max-width: 1790px) {
  .container {
    max-width: 1500px;
  }
}
@media screen and (max-width: 1540px) {
  .container {
    max-width: 1250px;
  }
}
@media screen and (max-width: 1290px) {
  .container {
    max-width: 1000px;
  }
}
@media screen and (max-width: 1040px) {
  .container {
    max-width: 750px;
  }
}
@media screen and (max-width: 790px) {
  .container {
    max-width: 500px;
  }
}

<div class="container">
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
</div>

Run codeHide result

Answer 1

220 .

220 ?

flexbox?

.

flex-grow min-width flex.

, :

.tiles {
    flex-grow: 1;
    min-width: 220px;
}

:

.tiles {
    flex: 0 0 220px; /* don't grow, don't shrink, stay at 220px width */
}

flex flex-grow, flex-shrink, flex-basis.

flex-grow , , . 0, ( flex-basis).

flex-shrink , . 0, ( flex-basis).

flex-basis flex.

---

-, .

flex, , flex-wrap, , -. .

---

: DEMO

: , , , .

. : Flexbox

---

UPDATE

:

HTML

<ul id="content">
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
            ...
            ...
            ...
</ul>

CSS

*
{
    margin:0;padding:0;
}

#content {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin:0 auto;
}
.box {
    flex: 0 0 90px;
    height: 90px;
    margin: 5px;
    background-color: blue;
}

@media (min-width: 200px) {
  #content {
    width: 200px;
  }
}
@media (min-width: 300px) {
  #content {
    width: 300px;
  }
}
@media (min-width: 400px) {
  #content {
    width: 400px;
  }
}
@media (min-width: 500px) {
  #content {
    width: 500px;
  }
}
@media (min-width: 600px) {
  #content {
    width: 600px;
  }
}
@media (min-width: 700px) {
  #content {
    width: 700px;
  }
}
@media (min-width: 800px) {
  #content {
    width: 800px;
  }
}
@media (min-width: 900px) {
  #content {
    width: 900px;
  }
}
@media (min-width: 1000px) {
  #content {
    width: 1000px;
  }
}
@media (min-width: 1100px) {
  #content {
    width: 1100px;
  }
}

DEMO

Answer 2

, flexbox , ( , , flexbox). flex-grow, flex-shrink flex-basis flex: 0 0 auto, , , , . jsfiddle, , :

FIDDLE

Answer 3

Michael_B , , justify-content: center...

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 2000px;
  justify-content: center;
}

.tiles {
  border: 1px solid black;
  margin: 0 15px 30px 15px;
  flex: 0 0 220px;
  padding: 0;
  height: 220px;
}

.filler {
  border: 1px solid transparent;
  margin: 0 15px 0px 15px;
  flex: 0 0 220px;
  padding: 0;
  height: 0px;
  }

<div class="container">
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
</div>

Hide result