가로 3열의 명단을 예쁘게 배열하는 팁

문제

사이트를 만들 때 이런 느낌의 가로 3열 리스트를 만들고 싶은 경우가 많다.
하지만 신축성 상자 안에

justify-content:space-between;

배열하다

이렇게 10과 11 사이에 틈이 생긴다.

대책

.hoge::after{
  content: "";
  width: 30%;
}

이렇게 의심 요소로 11 이후에 목록을 추가하면 된다.
width의 수치는 목록의 너비와 같습니다.
Q. 리스트가 12개가 될 때 다음 줄을 넘지 않나요?
A. 추정 요소는 높이 0이므로 외관상 아무런 영향이 없습니다.

완성판 코드 예

<div class="inner">
  <ul class="list_anchor">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
  </ul>
</div>

.inner {
  width: 90%;
  margin: 0 auto;
  padding: 1em 0;
}
.list_anchor{
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap:         wrap;
}
.list_anchor::after{
  content: "";
  width: 30%;
}
.list_anchor li{
  width: 30%;
  margin-bottom: 1em;
}
.list_anchor li a{
  display: block;
  line-height: 1;
  position: relative;
  color: #0063cc;
  background: #dff0ff;
  text-decoration: none;
  padding: 10px 15px;
  font-weight: 500;
}
.list_anchor li a::after{
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid #0063cc;
  border-right: 3px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 3px solid transparent;
  position: absolute;
  right: 10px;
  top: calc(50%);
}