要素を等間隔に配置し、:after で配置するために十分なスペースを残すにはどうすればよいですか?

Question

疑似要素 :after を使用して、ブロック リストの最後の行を左側に揃えます。 space-evenly を使用してブロックを両端揃えにします。私の問題は、:after がスペースを占有するため、最後の行のブロックがユーザーと整列していないことです。この問題はどうすれば解決できますか?

リーリー リーリー

Answer 1

:after 疑似要素は Flex コンテナ内のスペースを占有し、最後の行の項目の配置を妨げます。これが問題の根本原因です。 flex auto の代わりに :after 疑似要素でマージンを使用することは、この問題を解決する 1 つの方法です。これは CSS の最新バージョンです:

リーリー

Answer 2

   .exposegrid {
      width: 500px;
      display: grid;
      grid-template-columns: repeat(auto-fill, 100px); /* this will create cells that will fill the space , if there is space of five, then each row will have five*/
      gap: 10px /*instedt of margin, use gap to space cells*/
    }
    .exposetab {
      width: 100px;
      height: 66px;
      background-color: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(0, 0, 0, 0.4);
      border-radius: 5px;
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    }

<div class="exposegrid">
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
  </div>