![](https://i0.wp.com/keepitupcoding.com/wp-content/uploads/2024/06/image-2-1024x348.png?resize=640%2C218&ssl=1)
<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; }
![](https://i0.wp.com/keepitupcoding.com/wp-content/uploads/2024/06/image-1-1024x245.png?resize=640%2C153&ssl=1)
flex를 사용해서 양 끝에 정렬한 아이템을 위 화면의 모습과 같이 각각 가운데와 오른쪽에 정렬하고 싶다면? 가상의 할당 공간을 선언하는 속성인 flex-grow를 사용하면 된다.
@media (min-width: 1024px) { header .wide-wrapper:before { content: ""; flex: 1; } .country { flex: 1; justify-content: flex-end; } }
![](https://i0.wp.com/keepitupcoding.com/wp-content/uploads/2024/06/image-3-1024x178.png?resize=640%2C111&ssl=1)
: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; } }
![](https://i0.wp.com/keepitupcoding.com/wp-content/uploads/2024/06/image-4-1024x173.png?resize=640%2C108&ssl=1)
mdn에 flex로 정렬된 형제 아이템들의 flex-grow 값이 모두 같다면 같은 flex-container 내부에서 동일한 공간을 할당받는다는 설명이 있다. 좀 더 확실하게 해주고 싶다면 logo에도 같은 크기를 할당하고, 이미지를 가운데 정렬해주면 정확히 가운데에 위치하게 된다. 🙂