当传递到下一行时，flex-wrap不会使项目居中

Question

当所有列都放在一行中时，space-around工作正常，文本在列中居中。

但是，当每列设置为width:33.333%时，它会跳转到新行，但不会水平居中。

你可以在这里看到： https://jsfiddle.net/f2yb72c9/1/

CSS

ul{
  list-style:none;
  padding:0;
}
.row-flex--footer {
    align-content: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

footer .column {
    flex: 1 1 auto;
}
@media (min-width: 868px) {
  footer .column {
    flex: 1 1 33.333%;
  }
}

HTML

<footer>

<div class="row-flex--footer">
          <div class="column">
            <nav>
              <h4 class="hl--list footer__hl">Company</h4>
              <ul>
                <li> <a class="footer__link">About us</a></li>
                <li><a class="footer__link">Careers</a></li>
                <li> <a class="footer__link">News</a></li>
              </ul>
            </nav>
          </div>
          <div class="column">
            <nav> 
              <h4 class="hl--list footer__hl">Surgeons</h4>
              <ul>
                <li> <a class="footer__link">3D Business Manager</a></li>
                <li><a class="footer__link">Plans &amp; Pricing</a></li>
              </ul>
            </nav>
          </div>
          <div class="column">         
            <nav> 
              <h4 class="hl--list footer__hl">Patients  </h4>
              <ul>
                <li> <a class="footer__link">Find a Crisalix surgeon</a></li>
                <li><a class="footer__link">Community</a></li>
              </ul>
            </nav>
          </div>
          <div class="column">            
            <nav>
              <h4 class="hl--list footer__hl">Support </h4>
              <ul>
                <li> <a class="footer__link">Surgeon Help Center</a></li>
                <li><a class="footer__link">Patient Help Center</a></li>
                <li><a class="footer__link">Surgeon Help Center</a></li>
              </ul>
            </nav>
          </div>
          <div class="column">          
            <nav>
              <h4 class="hl--list footer__hl">Legal</h4>
              <ul>
                <li> <a class="footer__link">Universal terms</a></li>
                <li><a class="footer__link">Privacy policy</a></li>
                <li><a class="footer__link">Security statements</a></li>
              </ul>
            </nav>
          </div>
          <div class="column">           
            <nav>
              <h4 class="hl--list footer__hl">Social</h4>
              <ul>
                <li> <a class="footer__link">Facebook</a></li>
                <li><a class="footer__link">Twitter</a></li>
                <li><a class="footer__link">Youtube</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </footer>