<div class="flex">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
.flex {
  display: flex;
  justify-content: flex-start;
  //子要素の余白を指定
  //最初の値は縦方向、2つ目の余白は横方向の余白を指定しています。
  gap: 0 20px;
  .box {
    width: 100px;
    height: 100px;
    background-color: #efefef;
    border: 1px solid #ddd;
  }
}
View Compiled

External CSS

  1. https://codepen.io/CMA-Designer/pen/eYGbmMx.css
  2. https://codepen.io/CMA-Designer/pen/bGYrOVX.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js