CSS – 두 개의 flex 아이템을 가운데와 오른쪽에 정렬하기

  <header>
    <div class="wide-wrapper">
      <div class="logo">
        <img src="public/logo.svg" alt="">
      </div>
      <div class="country">
        <img src="public/flag.svg" alt="">
        <button class="dropdown"><img src="public/arrow_drop_down.svg" alt=""></button>
      </div>
    </div>
  </header>

header {
  margin: 0.5rem 1rem;
}

header .wide-wrapper {
  background-color: var(--clr-white);
  border-radius: 999rem;
  height: 4.5rem;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.country {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

flex를 사용해서 양 끝에 정렬한 아이템을 위 화면의 모습과 같이 각각 가운데와 오른쪽에 정렬하고 싶다면? 가상의 할당 공간을 선언하는 속성인 flex-grow를 사용하면 된다.

@media (min-width: 1024px) {
  header .wide-wrapper:before {
    content: "";
    flex: 1;
  }

  .country {
    flex: 1;
    justify-content: flex-end;
  }
}

:before 선택자를 통해 country 아이템과 같은 크기의 할당 공간을 만들어주면 자동으로 logo 아이템이 그 사이에 위치하여 가운데 정렬이 되는 방식이다.

@media (min-width: 1024px) {
  header .wide-wrapper:before {
    content: "";
    flex: 1;
  }

  .logo {
    flex: 1;
  }

  .logo img {
    margin: 0 auto;
  }

  .country {
    flex: 1;
    justify-content: flex-end;
  }
}

mdn에 flex로 정렬된 형제 아이템들의 flex-grow 값이 모두 같다면 같은 flex-container 내부에서 동일한 공간을 할당받는다는 설명이 있다. 좀 더 확실하게 해주고 싶다면 logo에도 같은 크기를 할당하고, 이미지를 가운데 정렬해주면 정확히 가운데에 위치하게 된다. 🙂

참고 https://developer.mozilla.org/ko/docs/Web/CSS/flex-grow