flexbox/grid: 左右ピッタリ均等、最終行は左寄せ

flex + width 左右にマージンあり

justify-content: space-around は最終行が真ん中寄せなるため使わない。widthで均等分割パーセント指定。
[参考] flexbox早見表

html

<ul>
    <li><a href="#">Lorem ipsum dolor sit amet elit</a></li>
    <li><a href="#">ipsum</a></li>
    <li><a href="#">dolor</a></li>
    <li><a href="#">sit</a></li>
    <li><a href="#">amet</a></li>
</ul>

css

ul {
   padding: 0;
   display: flex;
   flex-wrap: wrap;
}
ul li{
   list-style: none;
   width:50%;/*分割する割合*/
   padding:5px 5px;/*ボックス間marginのようなスペース*/
   box-sizing: border-box;
}
ul li a{
   display: block;
   padding: 10px 15px;/*ボックス内の実際のpadding*/ 
   box-sizing: border-box;
   height: 100%;/*行数違い対策*/
   background:#eee;
}

ポイント：背景色や枠線は孫に入れる　左右はピッタリではない　子のpadding分空く　

Lorem ipsum dolor sit amet, consectetur adipisicing elit

ipsum

dolor

sit

amet

display:gridにすれば左右ピッタリ

css

ul{
   display:grid;
   grid-template-columns: 1fr 1fr;/*repeat(2, 1fr)*/
   grid-gap: 10px;
}
li{
   background:#eee;
   padding: 10px 15px;
}

※繰り返し回数を指定する書き方の場合repeatとカッコの間にスペースを入れると動かない

Lorem ipsum dolor sit amet, consectetur adipisicing elit

ipsum

dolor

sit

amet

auto-fitとauto-fillの違いは１行目の扱い方

auto-fit

• 最小幅が100px
• １行目は必ず左右ぴったり。1行目のボックス最大幅に限界がない
• 最終行は左寄せ

画面幅が縮まりボックスひとつの横幅が100pxより小さくなる時点でボックスが改行される。

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

Lorem

ipsum

dolor

Lorem

ipsum

dolor

sit

amet

consectetur

adipisicing

auto-fill

• 最小幅が100px
• １行目のボックスのが足りないときは左寄せ（特定の画面幅以上）
• 最終行は左寄せ

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

Lorem

ipsum

dolor

Lorem

ipsum

dolor

sit

amet

consectetur

adipisicing