Flexbox 및 패딩

나는 마법의 새끼 고양이 옥수수와 CSS 애니메이션에 대한 나의 이전 기사가 18분 동안 읽혀지는 것을 방금 보았습니다. 사람들이 전체 내용을 읽게 하는 것은 분명히 끔찍한 일입니다. 내가 내 글을 읽는 건 좋은데, 응?

어쨌든, 이것은 정말 짧은 것인데, 플렉스 포매팅 컨텍스트에서 패딩 사용에 대해 제 친구와 토론한 결과입니다. 그것이 친구들이 일상적인 대화에서 말하는 것이기 때문입니다.

하지만 사람들이 부딪힐 수 있는 상당히 일반적인 문제라고 생각하므로 여기에 글을 올립니다.

대본

스크롤의 수평 오버플로 동작이 있는 플렉스 컨테이너에 패딩을 적용하려고 시도한 경우 컨테이너의 플렉스 끝 부분에 패딩이 적용되지 않은 것을 알 수 있습니다.



이러한 상황에서 브라우저에 의해 플렉스 항목에 할당된 사용 가능한 공간은 플렉스 컨테이너의 컨테이닝 블록의 너비에서 가로 방향의 여백, 테두리 및 패딩을 뺀 값이기 때문입니다.

사양의 관련 섹션은 CSS Flexible Box Layout Module Level 1: 9.2 Line Sizing입니다.

업데이트: 내 원래 설명이 시작 패딩은 있지만 끝 패딩은 없는 이유를 실제로 설명하지 않는다는 점을 제기했습니다. 그리고 더 파헤치면서 웹 호환성의 제약을 고려하면서 오버플로 콘텐츠를 처리하는 방법에 대한 오랜 논쟁을 발견했습니다.

이것은 Flexbox 레이아웃에만 영향을 미치는 문제가 아니라 블록 및 인라인 자식이 있는 스크롤 컨테이너에도 다르게 영향을 미칩니다. CSS2.1은 오버플로에 대해 명확하지 않았으며 이로 인해 다른 브라우저 공급업체가 다른 동작을 구현하게 되었을 것입니다. 예를 들어 Webkit에는 블록 자식과 인라인 자식에 대해 서로 다른 정책이 있었습니다.

GitHub 문제[css-overflow-3] Clarify padding-bottom in overflow content에서 다음과 같이 언급했습니다.

I think historically the issue is that browsers didn't want to trigger scrollbars for overflow: auto unless visible content was overflowing the inner border edge, so they didn't count padding.

아직 문제가 해결되지 않았으며 관심 있는 사람은 다음 관련 링크를 통해 읽을 수 있습니다.

Bug 748518 padding-bottom/right(block-end/inline-end) is ignored with overflow:auto/scroll because it extends in from the border-box rather than out from the scrollable area

[css-grid-1] Include padding in scrollable overflow area

[css-overflow-3] Clarify padding-bottom in overflow content

CSS Overflow Module Level 3

Bug 1527949 Implement whatever more-interoperable behavior the CSSWG comes up with, for making "end" padding scrollable on scrollable elements

그러나 패딩이 있는 스크롤링 컨테이너에 항목이 있는 것은 비교적 일반적인 상황이며 원하는 효과를 얻기 위한 몇 가지 해결 방법이 있습니다. 두 해결 방법 모두 일종의 해킹입니다. 다음은 일부 항목이 포함된 기본 플렉스 컨테이너에 대한 마크업입니다.

<div class="flex">
  <div class="flex__item card">
    <img src="http://placekitten.com/150/150">
    <div class="card__txt">
      <h3>Sleep more</h3>
    </div>
  </div>
  <div class="flex__item card">
    <img src="http://placekitten.com/150/150">
    <div class="card__txt">
      <h3>Sleep more</h3>
    </div>
  </div>
  <!–– repeat for like 10 more cards ––>
</div>

테두리 사용

한 가지 옵션은 컨테이너의 항목 주위에 패딩처럼 보이도록 테두리의 스타일을 지정하는 것입니다.

.border {
  border: 1em #4abc41 solid;
}

이 솔루션의 잠재적 단점은 스크롤 막대의 위치입니다. 운영 체제에 따라 문제가 될 수도 있고 그렇지 않을 수도 있습니다. 예를 들어, Windows(아래에 표시된 스크린샷)에서는 매우 분명합니다. Android에서는 스크롤바가 거의 눈에 띄지 않습니다.



이 기회를 빌어 현재 Editor's Draft인 CSS Scrollbars Module Level 1 사양에 대해 이야기하고 싶습니다. 스크롤 막대 스타일 지정을 위한 2개의 새로운 CSS 속성인 scrollbar-color 및 scrollbar-width 를 소개합니다. Firefox는 버전 64부터 지원했습니다.

자세한 내용은 Issue № 1022 of Web Platform News에 기록되어 있습니다.

::after 의사 요소 사용

또 다른 옵션은 플렉스 컨테이너에서 의사 요소::after를 활용하는 것입니다. ::before 및 ::after는 생성된 콘텐츠이며 연결된 요소 바로 내부에 삽입됩니다. 즉, 플렉스 컨테이너 내부의 하위 요소로 렌더링됩니다.

.pseudo-elem {
  padding: 1em;

  &::after {
    content: '';
    padding: 0.5em;
  }
}

::after 의사 요소의 패딩이 플렉스 컨테이너에 사용된 패딩의 절반인지 확인해야 합니다.

마무리

나는 이것이 짧을 것이라고 약속했다. 어쨌든, 코드를 살펴보고 그것을 엉망으로 만들고 싶다면. 또는 더 좋은 방법은 해결 방법 목록에 추가하는 것입니다. 언제든지 그렇게 하십시오. 그리고 귀하의 솔루션으로 저를 핑하십시오!