flex: 1은 해당 요소가 남은 공간을 모두 차지하도록 만드는 속성

• display: flex인 부모 요소가 있어야 작동함
• flex-grow: 1, flex-shrink: 1, flex-basis: 0과 같은 의미
• 예를 들어, .wrapper나 .page, .contents 등에 flex: 1을 주면,
  • 헤더와 푸터를 제외한 나머지 영역 전체를 채워주는 역할을 함
  • 스크롤을 위해 높이를 확보하거나, 세로 정렬시 가운데 정렬이 잘 되게끔 하는 데 유리

flex mixin

// Flex 대응 mixin
@mixin flexbox{
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
}
@mixin flex-direction($direction) {
    @if $direction == row {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
    } @else if $direction == column {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
    }
    -ms-flex-direction: $direction;
    flex-direction: $direction;
}
@mixin justify-content($value) {
    -webkit-box-pack: $value;
    -ms-flex-pack: $value;
    justify-content: $value;
  }
@mixin align-items($value) {
    -webkit-box-align: $value;
    -ms-flex-align: $value;
    align-items: $value;
}
/**
사용 방법
.container {
  @include flexbox;
  @include flex-direction(row);
  @include justify-content(center);
  @include align-items(center);
}
**/

아무 메모

(정리해서 쓰기)

✅ 4. height: 100dvh를 쓴 이유는?

👉 100dvh는 "진짜 실제 뷰포트 높이"를 정확히 반영하는 단위야.

📱 모바일 브라우저에서 중요한 이유

• 100vh는 주소창(네비게이션 바 포함)까지 높이를 포함해버려서

  스크롤 안 해도 생기는 여백 문제가 생겨

• 반면 100dvh는 주소창 제외한 실제 사용 가능한 높이만큼만 계산해줌

✅ 특히 모바일에서 아래 같은 문제가 없어짐:

• 스크롤하면 갑자기 높이가 확 줄어들거나 늘어나는 현상