flexbox space-between last line justified

based on http://stackoverflow.com/a/24464611/703717

HTML

<div id="container">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   <div>6</div>
   <div>7</div>
   <div>8</div>
   <div>9</div>
   <div>10</div>
   <div>11</div>
   <div>12</div>
   <div>13</div>
   <div>14</div>
   <div>15</div>
   <div class="hidden"></div>
   <div class="hidden"></div>
   <div class="hidden"></div>
   <div class="hidden"></div>
   <div class="hidden"></div>
   <div class="hidden"></div>
   <div class="hidden"></div>
</div>

CSS

/* the actual CSS to make them evenly spaced: */

#container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

div div {
    width: 150px;
    height: 150px;
    background: rgb(30, 156, 136);
    border-color: rgb(41, 41, 41);
    border-width: 0 1px;
    border-style: solid;
    margin: 10px;
    color: white;
    text-algin: center;
}
.hidden{
    height:0; width: 150px;
    display:inline-block;
    margin: 10px;
}

#container div:first-child {
    border-left: 0;
}

#container div:last-child {
    border-right: 0;
}