Flexbox로 가로 정렬하기

메뉴나 버튼처럼 여러 요소를 가로 한 줄로 나란히 배치하고 싶을 때도 display: flex를 씁니다. 자식 사이 간격은 gap으로 주면 마진을 하나하나 계산하지 않아도 됩니다.

<style>
  .toolbar {
    display: flex;
    gap: 8px;
  }
</style>

gap은 flex뿐 아니라 grid에서도 똑같이 쓰입니다.