Helper div with display: flex; margin, padding 으로 가로 너비 설정/맞추는 법 정리

# Helper div with display: flex; margin, padding 으로 가로 너비 설정/맞추는 법 정리

Responsive width with finitely filling the parent, and I wanna use display: flex; to align elements.

위와 같이 가로폭은 적당한 길이만큼만 확장되고, 나머지 안의 것들은 display: flex; 로 정렬하고 싶은데, 코딩을 해보면서 꽤 헤맸던 부분이라 정리할 겸 포스팅. ## PH

• 2024-07-30

## TOC ## HTML code ```[.lang-html] <header> <div class="sub"> <div class="sub-header"> <a href="/"><img class="logo" src="/images/Property 1=lg.png" alt="판다마켓 Logo image"></a> <a href="/login" class="button">로그인</a> </div> </div> </header> ```/ 와 같이 배치했음. 보면 helper div 로 <div class="sub"> 이 추가된 걸 볼 수 있는데... CSS 는 다음과 같음. ```[.lang-css] header { height: 70px; position: sticky; z-index: 100; top: 0; background-color: white; border-width: 0 0 1px; border-color: var(--border-color); } header, main, footer { max-width: 1920px; /* max-width 를 주고 margin:0 auto 로 중앙 정렬. */ margin: 0 auto; display: flex; /* Sub elements 들에 대한 정렬을 위해 flex 를 씀. */ align-items: center; } * { box-sizing: border-box; } .sub { flex-grow: 1; /* 이게 핵심인데, 이 값은 default 0 이기 때문에 div.sub 의 width 가 fit-content 처럼 되어버려서 전체 width 를 차지하지 못함. 이 값을 1로 줘서 전체 width 를 채우도록 강요. */ margin: 0 12.5rem; } header .sub-header { display: flex; /* 위의 flex-grow 설정으로 안쪽 elements 들의 정렬이 깔끔하게 이어질 수 있음. */ justify-content: space-between; align-items: center; } ```/ ## RRA

1. 코드잇 과제 - 판다마켓 by kipid, 2024-07-30