Все inline-block justify, но последняя строка center (css)

Не понимаю, как сделать inline-block'и изначально выровненными по ширине, но при уменьшении области просмотра и переносе последнего/предпоследнего и тд последняя строка была бы text-aligh: center.

Если в примере поменять text-align-last на center, то блоки будут по центру, т.к. строка всего одна и она и есть последняя.

Пример блоков:

html, body{margin:0;padding:0;} 
 
.wrapper{ 
  background: pink; 
  font-size: 0; 
  text-align: justify; 
  text-align-last: justify; 
} 
 
.child{ 
  display: inline-block; 
  width: 50px; 
  height: 50px; 
  background: gray; 
  margin-bottom: 5px; 
}

<div class="wrapper"> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
  <div class="child"></div> 
</div>

То есть есть произвольное количество блоков в родителе, где все строки, кроме последней justify, последняя center. Фишка в том, что если строка одна, то она и является последней, соответственно у нее text-align: center.

@media не решает проблемы, потому что количество блоков неизвестно.

Может я вообще не туда ушел и тут какие-нибудь float и margin используют?

В общем, заранее спасибо!