flex 간격과 가운데 정렬

display: flex를 준 다음에는 세 가지를 자주 씁니다.

gap은 자식 사이의 간격, justify-content는 가로 방향 정렬, align-items는 세로 방향 정렬입니다.

<style>
  .row {
    display: flex;
    gap: 12px;
    justify-content: center;
  }
</style>

justify-content: center는 자식들을 가로 가운데로 모읍니다. space-between을 쓰면 양 끝으로 벌리고 사이를 균등하게 띄웁니다.