css

.container {
      margin: 15px 0;
      padding: 10px;
      background-color: #f8f9fa;
      border-radius: 8px;
    }
    
    .flex-container {
      display: flex;
      width: 100%;
      height: 60px;
      background-color: white;
      border: 2px solid #dee2e6;
      border-radius: 5px;
      padding: 10px;
      box-sizing: border-box;
    }
    
    .flex-item {
      background-color: #6C5CE7;
      color: white;
      padding: 15px 20px;
      border-radius: 5px;
      font-weight: bold;
    }
    
    .start { justify-content: flex-start; }
    .end { justify-content: flex-end; }
    .center { justify-content: center; }
    .between { justify-content: space-between; }
    .around { justify-content: space-around; }
    .evenly { justify-content: space-evenly; }

html

<div class="container">
    <h4>⬅️ flex-start（預設）</h4>
    <div class="flex-container start">
      <div class="flex-item">A</div>
      <div class="flex-item">B</div>
      <div class="flex-item">C</div>
    </div>
  </div>

  <div class="container">
    <h4>➡️ flex-end</h4>
    <div class="flex-container end">
      <div class="flex-item">A</div>
      <div class="flex-item">B</div>
      <div class="flex-item">C</div>
    </div>
  </div>

  <div class="container">
    <h4>🎯 center</h4>
    <div class="flex-container center">
      <div class="flex-item">A</div>
      <div class="flex-item">B</div>
      <div class="flex-item">C</div>
    </div>
  </div>

  <div class="container">
    <h4>📏 space-between</h4>
    <div class="flex-container between">
      <div class="flex-item">A</div>
      <div class="flex-item">B</div>
      <div class="flex-item">C</div>
    </div>
  </div>

  <div class="container">
    <h4>⭐ space-around</h4>
    <div class="flex-container around">
      <div class="flex-item">A</div>
      <div class="flex-item">B</div>
      <div class="flex-item">C</div>
    </div>
  </div>

  <div class="container">
    <h4>🔄 space-evenly</h4>
    <div class="flex-container evenly">
      <div class="flex-item">A</div>
      <div class="flex-item">B</div>
      <div class="flex-item">C</div>
    </div>
  </div>