Центрирование кнопок независимо от того, сколько в списке

Question

Я создал относительно простой макет, используя два DIV. Идея состоит в том, что все сосредоточено в их собственных DIV, но если не достаточно заполнить строку, то расположенные ниже также будут в центре.

.row {
    display: table;
    width: 95%;
    text-align: center;
    margin-left: 2.5%;
    margin-right: 2.5%;
    margin-top: 2.5vh;
    margin-bottom: 2.5vh;
}

.item {
    width: 16.6%;
    float: left;
}

@media only screen and (max-device-width: 500px) {
.item {
    width: 33.3%;
    float: left;
}
}

<div class="row">

<div class="item">
    1
</div>

<div class="item">
    2
</div>

<div class="item">
    3
</div>

<div class="item">
    4
</div>

<div class="item">
    5
</div>

<div class="item">
    6
</div>

</div>
</div>

Они работают нормально и все выровнены. Проблема возникает при нечетном количестве элементов.

Например:

| 1 | 2 | 3 | | 4 | 5 | 6 |

Отлично работает на мобильных устройствах, но ...

| 1 | 2 | 3 | | 4 | 5 | |

нет. Я бы хотел что-то вроде этого ...

| 1 | 2 | 3 | | 4 | 5 |

Это означает, что независимо от того, сколько элементов добавлено в HTML, они будут распределяться должным образом, когда эти правила будут нарушены. Заранее спасибо:)

Надеюсь, это имеет смысл.

Answer 1

Здесь вы go с решением, используя Flexbox

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  display: flex;
  width: 20%;
  height: 100px;
  border: 1px Solid;
  justify-content: center;
  align-items: center;
  margin: 5px;
}

<div class="row">
  <div class="item">
      1
  </div>

  <div class="item">
      2
  </div>

  <div class="item">
      3
  </div>

  <div class="item">
      4
  </div>

  <div class="item">
      5
  </div>
</div>

jsfiddle