flexbox의 나머지 부분을 채우는 쓰기 요약

개시하다

어떤 사건에서 flexbox를 사용할 때 푹 빠진 flexbox의 남은 너비 (높이) 를 메우는 글쓰기가 기록되어 있다.

하고 싶은 일.

스마트폰 사이트에서는 머리 높이를 80px로 고정해 나머지 높이의 콘텐츠 영역(화면이 굴러가지 않음)을 확보한다.
그런 인상입니다.

HTML의 샘플 코드는 이런 느낌입니다.

<div class="parent-box">
  <div class="header">ヘッダー領域(height=80px)</div>
  <div class="content">コンテンツ領域(height=残り)</div>
</div>

안되다

css

html, body {
  height: 100%;
  margin: 0;
}

.parent-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  height: 80px;
  background-color: #E57373;
}

.content {
  height: 100%; // ここがNG
  background-color: #90CAF9;
}

어떻게

정확한 상태
잘못 쓴 경우.


정확한 상태에 비해 눈썹 높이가 부족해 보인다.
위의 이미지는 아이폰SE(375*667)에 표시되지만 잘 쓰지 못하면 눈썹 높이는 71.44px이다.

왜 안 되지?

헤더의 높이를 합치면 80px와conntent의 높이가 100%이며parent-box의 높이를 초과합니다.
flexbox에 포함된 하위 요소는 기본값flex-shrink: 1으로 설정되며 주축 방향(이번은 높은 방향)의 넓이가 모두 부 요소를 초과할 때flex-shrink의 값에 따라 요소의 넓이를 자동으로 조정합니다.
이번 예에서 중성자 요소는 모두 flex-shrink: 1이기 때문에 자요소의 높이에 따라 모요소의 높이를 구분한다.
구체적으로 다음과 같은 공식으로 높이를 계산한다.

# 100% = 667pxの場合
headerの高さ = 親要素の高さ * headerに指定した高さ / (parent-boxの子要素の高さの合計)
            = 100% * 80px / (80px + 100%) 
            ≒ 71.44px 

또한 이런 기법도 페이지의 눈썹 높이가 화면의 높이에 따라 변화하는 문제가 존재한다.

올바른 쓰기 중 하나 (calc 사용)

이번 사례에서 페이지의 눈썹 높이가 고정되어 있기 때문에 내용의 높이는calc로 계산된다.

css(폐품 상황의 변경점만 발췌)

.content {
  height: calc(100% - 80px); // ここでcalcを使う
  background-color: #90CAF9;
}

정확한 쓰기 2 (flex-grow 사용)

flexbox에서 자동으로 공백 영역을 하위 요소에 분배하는 속성flex-grow이 있습니다.
이 기능을 사용하면 내용 영역의 높이를 flexbox의 모든 경계로 설정할 수 있습니다.

css(폐품 상황의 변경점만 발췌)

.content {
  flex-grow: 1; // 余白に合わせて伸張する
  background-color: #90CAF9;
}

flexbox의 하위 요소는 기본적으로 flex-grow: 0로 설정됩니다.
내용 영역에서만 이 값을 덮어쓰고, 내용 영역을 공백 영역으로 확장할 수 있으며, 눈썹 영역에 공백 영역을 분배하지 않습니다.

어느 것이 좋아요?

나는 개인적으로 flex-grow가 비교적 좋다고 생각한다.
calc의 작법에서 공식에 고정값으로 다른 요소의 높이를 삽입해야 하기 때문에 수정할 때 신경 쓰이는 부분을 늘리는 것이 단점이다.
또한 flex-grow를 사용하는 사람들이 공백을 남기지 않고 사용하려고 하는 의도가 명확하고 나중에 읽으면 이해하기 쉽다.

총결산

flexbox의 하위 요소는 기본 설정의 속성을 가지고 있습니다

flexbox의 초기 값

flexbox를 제외하고는 초기 값에 무엇을 설정했는지 의식하는 것이 중요하다.생각보다 안 나오면 초기치 때문일 수도 있어요.

flexbox의 주축 방향에서 폭이 초과되면 하위 요소가 자동으로 축소되어 기본 상태에서 초과하지 않습니다

결과를 그대로 사용하지 말고 실험을 잘해라(가장 중요하다)

갑자기 업무 코드에 추가됐는데 디스플레이에 문제가 없어 보이길래 그냥 작업을 진행했는데 이후 문제가 발견됐어요...

(이번 글 작성의 목적 중 하나는 이 일에 대한 경계)

후기

이 기사를 쓰면서 당시 상황을 돌아보면 플렉스박스를 쓸 필요가 없었던 것 같다.
하지만 flexbox에 대한 지식이 하나 늘었기 때문에 개의치 않는다.