justify-content로 정렬 방향 정하기

justify-content는 flex 컨테이너 안 자식들을 가로 방향으로 어떻게 벌릴지 정합니다. flex-start(기본, 왼쪽), flex-end(오른쪽), center(가운데), space-between(양 끝에 붙이고 사이를 균등하게) 같은 값이 있습니다.

<style>
  .nav {
    display: flex;
    justify-content: flex-end;
  }
</style>

로고는 왼쪽, 메뉴는 오른쪽에 붙이는 헤더를 만들 때 space-between을 자주 씁니다.