flex佈局中 justify-content: space-between方法的排版問題

flex給我們的佈局帶來了很大的方便 ，但有時候也會碰到一些問題，比如space-between最後一行元素的排列問題

問題：假如我們有8個元素

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li
 
>
    <li>7</li>
    <li>8</li>
</ul>
<style>
  ul {
    width: 300px;
    height: 400px;
    background: #f0f0f0;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 5px;
  }
  ul li {
    width
 
: 90px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: pink;
    border-radius: 10px;
  }
  </style>

由於space-between就是兩端佈局，當最後一行不滿三個的時候，最後一排會分在兩端。

解決方案：使用after偽元素來解決該佈局bug

ul:after{
    content: '';
    width: 90px;
 }

完美。