Как центрировать div на каждой точке останова с помощью flexbox?

Question

Я хочу центрировать элементы div так, как они у меня есть в настоящее время, но проблема в том, что когда есть два элемента div, они не совпадают с прямоугольником выше. Я знаю, что они выровняются с justify-content:space between, но это предотвратит центрирование div, когда он единственный в ряду. Возможно ли то, что я хочу сделать?

.wrapper {
  max-width: 1000px;
  margin: 0 auto
}

.title {
  width: 100%;
  height: 100px;
  background: green;
  margin-bottom: 30px;
}

.outer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.col {
  /*            flex-grow, flex-shrink, flex-basis*/
  flex: 0 0 31%;
  margin: 0 1% 2% 1%;
  height: 300px;
}

.col1 {
  background-color: red;
}

.col2 {
  background-color: blue
}

.col3 {
  background: black;
}

@media only screen and (max-width: 960px) {
  .col {
    flex: 0 0 48%;
  }
}

@media only screen and (max-width: 480px) {
  .col {
    flex: 0 0 100%;
  }
}

<div class="wrapper">
  <div class="title">

  </div>
  <div class="outer">
    <div class="col col1">

    </div>
    <div class="col col2">

    </div>
    <div class="col col3">

    </div>

  </div>

</div>

Answer 1

Вы можете установить margin-left: auto на .col1 и margin-right: auto на .col2, чтобы выдвинуть деления соответственно.

.wrapper {
  max-width: 1000px;
  margin: 0 auto
}

.title {
  width: 100%;
  height: 100px;
  background: green;
  margin-bottom: 30px;
}

.outer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.col {
  /*            flex-grow, flex-shrink, flex-basis*/
  flex: 0 0 31%;
  margin: 1% 0 2% 0;
  height: 300px;
}

.col1 {
  background-color: red;
  margin-right: auto;
}

.col2 {
  background-color: blue;
  margin-left: auto;
}

.col3 {
  background: black;
}

@media only screen and (max-width: 960px) {
  .col {
    flex: 0 0 48%;
  }
}

@media only screen and (max-width: 480px) {
  .col {
    flex: 0 0 100%;
  }
}

<div class="wrapper">
  <div class="title">

  </div>
  <div class="outer">
    <div class="col col1">

    </div>
    <div class="col col2">

    </div>
    <div class="col col3">

    </div>

  </div>

</div>