바닥글을 맨 아래에 유지: Flexbox 대 그리드

This is the first post in a series examining modern CSS solutions to problems I've been solving over the last 13+ years of being a frontend developer. Visit ModernCSS.dev to view the whole series and additional resources.

나는 수년 동안 Matthew James Taylor의 this article 메인 콘텐츠 길이에 관계없이 페이지 하단에 웹페이지 바닥글을 유지하는 방법을 지속적으로 언급했습니다. 이 방법은 확장 가능하지 않지만 BF(Before Flexbox)에 매우 좋은 솔루션인 명시적 바닥글 높이 설정에 의존했습니다.

SPA 개발을 주로 다루는 경우 이 문제가 여전히 존재하는 이유에 대해 혼란스러울 수 있지만 여전히 다음과 같은 이유로 바닥글이 떠 있는 것을 찾을 수 있습니다.

로그인 페이지

블로그/뉴스 기사(광고 없음...)

확인 작업과 같은 흐름의 삽입 페이지

상품 목록 페이지

캘린더 이벤트 상세

현대 CSS로 이것을 처리하는 두 가지 방법이 있습니다: flexbox와 grid.

다음은 flexbox 메서드로 기본 설정된 데모입니다. 전체 Codepen을 열면 $method 변수를 grid로 교체하여 해당 대안을 볼 수 있습니다.

각 방법에 대해 알아보려면 지난 데모를 읽으십시오.

플렉스박스 방식

이 방법은 다음을 정의하여 수행됩니다.

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

// Optional
main {
  margin: 0 auto;
  // or: align-self: center
  max-width: 80ch;
}

작동 원리

먼저 body 요소가 min-height: 100vh 를 사용하여 화면의 전체 높이 이상으로 늘어나는지 확인합니다. 콘텐츠가 짧은 경우 오버플로가 발생하지 않으며(예외: certain mobile browsers) 콘텐츠가 필요에 따라 높이를 계속 늘릴 수 있습니다.
flex-direction: column를 설정하면 쌓인 블록 요소를 유지한다는 관점에서 일반 문서 흐름의 동작을 유지합니다(body의 직계 자식은 모두 실제로 블록 요소라고 가정).

flexbox의 장점은 margin: auto 동작을 활용한다는 것입니다. 이 이상한 트릭으로 인해 설정되어 있는 항목과 해당 방향에서 가장 가까운 형제 사이의 공간이 여백으로 채워집니다. 설정margin-top: auto은 바닥글을 화면 하단으로 효과적으로 밀어 넣습니다.

갓챠

데모에서는 flexbox 메서드에서 outline 요소가 높이를 채우지 않는다는 것을 보여주기 위해 main를 main에 추가했습니다. 이것이 margin-top: auto 트릭을 사용해야 하는 이유입니다. 이것은 당신에게 중요하지 않을 수 있지만, 그렇다면 사용 가능한 공간을 채우기 위해 늘리는 그리드 방법main을 참조하십시오.

그리드 방식

이 방법은 다음을 설정하여 수행됩니다.

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

// Optional
main {
  margin: 0 auto;
  max-width: 80ch;
}

작동 원리

우리는 이 방법을 위해 min-height: 100vh를 유지하지만 grid-template-rows를 사용하여 사물을 올바르게 배치합니다.

이 방법의 이상한 트릭은 특수 그리드 유닛fr을 사용하는 것입니다. fr는 "분수"를 의미하고 이를 사용하면 브라우저가 해당 열이나 행에 배포하기 위해 남은 공간의 사용 가능한 "분할"을 계산하도록 요청합니다. 이 경우 머리글과 바닥글 사이에 사용 가능한 모든 공간을 채우고 flexbox 메서드에서 "고쳐"도 해결합니다.

어떤게 더 좋아?

그리드를 보고 나면 확실히 우월하다는 생각이 들 수도 있습니다. 그러나 머리글과 바닥글 사이에 더 많은 요소를 추가하는 경우 템플릿을 업데이트해야 합니다(또는 중첩된 의미 체계/계층 구조에 영향을 미치지 않도록 항상 div와 같은 래핑 요소가 있는지 확인).

반면에 flexbox 방법은 중간 섹션에 여러 블록 요소가 있는 다양한 템플릿에서 사용할 수 있습니다. 예를 들어 아카이브 페이지에 대한 단일<article> 요소 대신 일련의<main> 요소가 있습니다.

따라서 모든 기술과 마찬가지로 프로젝트에 따라 다릅니다. 하지만 우리 모두는 이러한 현대적인 CSS 레이아웃 방법이 있다는 것이 놀랍다는 데 동의할 수 있습니다!