Flexbox: 그 유연한 상자의 크기는 얼마입니까?

이것은 Flexbox에 대한 제 시리즈의 세 번째 부분입니다. 지난 두 기사에서 플렉스 컨테이너를 생성하고 Flexbox에서 작동하는 정렬을 탐색할 때 어떤 일이 발생하는지 살펴보았습니다. 이번에는 사이즈에 대해 알아보겠습니다. 플렉스 항목의 크기를 제어하는 ​​방법과 크기를 제어할 때 브라우저는 어떤 선택을 할까요?

플렉스 항목의 초기 표시

내부에 다양한 길이의 콘텐츠가 있는 항목 집합이 있고 부모를 display: flex 로 설정하면 항목이 행으로 표시되고 해당 축의 시작 부분에 정렬됩니다. 아래 예에서 내 세 항목에는 소량의 콘텐츠가 있으며 각 항목의 콘텐츠를 끊김 없는 줄로 표시할 수 있습니다. flex-grow 의 초기 값이 0 이므로 항목이 자라지 않는 플렉스 컨테이너 끝에 공간이 있습니다.

이 항목에 더 많은 텍스트를 추가하면 결국 컨테이너가 채워지고 텍스트가 줄 바꿈되기 시작합니다. 상자에는 각 상자에 있는 텍스트의 양에 해당하는 컨테이너 공간의 일부가 할당됩니다. 텍스트 문자열이 더 긴 항목에는 더 많은 공간이 할당됩니다. 이것은 옆집 항목에 단일 단어만 포함되어 있을 때 많은 텍스트가 포함된 키가 작은 열로 끝나지 않는다는 것을 의미합니다.

이 동작은 Flexbox를 사용해 본 적이 있는 경우 익숙할 수 있지만 여러 최신 브라우저에서 모두 동일한 작업을 수행하는 것을 볼 수 있는 것처럼 브라우저가 크기 조정을 어떻게 작동하는지 궁금할 것입니다. 이것은 이와 같은 세부 사항이 사양에서 해결되어 새 브라우저나 다른 사용자 에이전트에서 Flexbox를 구현하는 모든 사람이 이 계산이 어떻게 작동해야 하는지 알고 있다는 사실에 달려 있습니다. 사양을 사용하여 이 정보를 스스로 찾을 수 있습니다.

CSS 고유 및 외부 크기 지정 사양

Flexbox 사양에서 크기 조정에 대한 내용을 볼 때 필요한 많은 정보가 CSS Intrisnic 및 Extrinsic Sizing과 같은 다른 사양에 있다는 것을 상당히 빨리 발견합니다. 이는 정렬 속성이 Flexbox에 고유하지 않은 것과 마찬가지로 우리가 사용하는 크기 조정 개념이 Flexbox에 고유하지 않기 때문입니다. 그러나 이러한 사이징 구성이 Flexbox에서 사용되는 방식에 대해서는 Flexbox 사양을 확인해야 합니다. 앞뒤로 점프하는 것처럼 느껴질 수 있으므로 여기서는 기사의 나머지 부분에서 사용할 몇 가지 주요 정의를 정리하겠습니다.

선호하는 크기

상자의 기본 크기 는 width 또는 height 로 정의된 크기이거나 inline-size 및 block-size 속성에 대한 논리적 별칭입니다. 사용하여:

 .box { width: 500px; }

또는 논리적 별칭 inline-size :

 .box { inline-size: 500px; }

상자의 너비가 500픽셀 또는 인라인 방향으로 500픽셀이 되기를 원한다고 말합니다.

최소 콘텐츠 크기

최소 콘텐츠 크기는 오버플로를 일으키지 않고 상자가 가질 수 있는 가장 작은 크기입니다. 상자에 텍스트가 포함되어 있으면 가능한 모든 소프트 랩핑 기회가 주어집니다.

최대 콘텐츠 크기

최대 콘텐츠 크기는 상자가 콘텐츠를 포함할 수 있는 가장 큰 크기입니다. 상자에 구분할 서식이 없는 텍스트가 포함되어 있으면 하나의 긴 문자열로 표시됩니다.

플렉스 아이템 메인 사이즈

플렉스 항목의 기본 크기 는 기본 차원에 있는 크기입니다. 영어로 연속으로 작업하는 경우 기본 크기는 너비입니다. 영어의 열에서 주요 크기는 높이입니다.

또한 항목에는 기본 치수의 최소 min-width 또는 min-height 로 정의된 최소 및 최대 기본 크기가 있습니다.

플렉스 아이템의 크기 계산하기

이제 몇 가지 용어가 정의되었으므로 플렉스 항목의 크기가 어떻게 지정되는지 확인할 수 있습니다. flex 속성의 초기 값은 다음과 같습니다.

• flex-grow: 0
• flex-shrink: 1
• flex-basis: auto

flex-basis 는 사이징이 계산되는 것입니다. flex-basis 를 0 으로 설정하고 flex-grow 를 1로 설정하면 모든 상자에 시작 너비가 없으므로 플렉스 컨테이너의 공간이 균등하게 공유되어 각 항목에 동일한 양의 공간이 할당됩니다.

flex-basis 가 auto 이고 flex-grow: 1 인 경우 콘텐츠 크기를 고려하여 여유 공간만 배포됩니다.

예를 들어 한 줄에 담을 수 있는 것보다 더 많은 콘텐츠가 있는 경우와 같이 여유 공간이 없는 경우 배포할 공간이 없습니다.

이것은 Flexbox가 상자의 크기를 계산하는 방법을 알고 싶다면 auto 가 무엇을 의미하는지 알아내는 것이 매우 중요하다는 것을 보여줍니다. auto 의 값이 우리의 출발점이 될 것입니다.

자동 정의

auto 가 CSS에서 어떤 것에 대한 값으로 정의될 때, 그것은 그 맥락에서 매우 특정한 의미를 가질 것입니다. 한 번 살펴볼 가치가 있는 것입니다. CSS 작업 그룹은 사양 편집자 Fantasai를 위한 이 강연에서 설명하듯이 auto가 어떤 맥락에서나 의미하는 바를 파악하는 데 많은 시간을 할애합니다.

사양에서 flex-basis 로 사용될 때 auto 가 무엇을 의미하는지에 대한 정보를 찾을 수 있습니다. 위에 정의된 용어는 이 진술을 분석하는 데 도움이 됩니다.

"플렉스 항목에 지정되면 auto 키워드는 사용된 '플렉스 기반'으로 기본 크기 속성의 값을 검색합니다. 그 값 자체가 auto이면 사용되는 값은 'content'입니다."

따라서 flex-basis 가 auto 이면 Flexbox는 정의된 기본 크기 속성을 살펴봅니다. 플렉스 항목에 width 를 지정했다면 기본 크기가 됩니다. 아래 예시에서는 모든 항목의 너비가 110px이므로 flex-basis의 초기 값이 auto이므로 기본 크기로 사용하고 있습니다.

CodePen에서 Rachel Andrew(@rachelandrew)의 Pen Smashing Flexbox Series 3: 너비가 있는 플렉스 항목을 참조하십시오.

그러나 초기 예제에는 너비가 없는 항목이 있습니다. 이는 기본 크기가 auto 임을 의미하므로 다음 문장으로 이동해야 합니다. "그 값 자체가 auto이면 사용된 값은 content 입니다."

이제 사양이 content 키워드에 대해 말하는 내용을 살펴봐야 합니다. 이것은 flex-basis 에 대해 (지원 브라우저에서) 사용할 수 있는 또 다른 값입니다. 예를 들면 다음과 같습니다.

 .item { flex: 1 1 content; }

사양은 다음과 같이 content 을 정의합니다.

"플렉스 항목의 내용에 따라 자동 크기를 나타냅니다. (일반적으로 최대 콘텐츠 크기와 동일하지만 종횡비, 고유 크기 제한 및 직교 흐름을 처리하기 위해 조정됩니다."

이 예에서 텍스트가 포함된 플렉스 항목을 사용하면 더 복잡한 조정을 무시하고 content 를 최대 콘텐츠 크기로 취급할 수 있습니다.

이것은 각 항목에 적은 양의 텍스트가 있을 때 텍스트가 줄 바꿈되지 않는 이유를 설명합니다. 플렉스 항목은 자동 크기 조정되므로 Flexbox는 최대 콘텐츠 크기를 확인하고 항목은 해당 크기의 컨테이너에 맞으면 작업이 완료됩니다!

더 많은 콘텐츠를 추가할 때 상자가 최대 콘텐츠 크기로 유지되지 않기 때문에 이야기는 여기서 끝나지 않습니다. 그렇게 하면 플렉스 컨테이너에서 빠져 나와 오버플로가 발생합니다. 컨테이너를 채우면 콘텐츠가 래핑되기 시작하고 항목은 내부 콘텐츠에 따라 크기가 달라집니다.

유연한 길이 해결

사양이 상당히 복잡해 보이는 이 시점에서 수행해야 하는 단계는 다음과 같습니다.

먼저 모든 항목의 기본 크기를 더하고 컨테이너의 사용 가능한 공간보다 크거나 작은지 확인합니다.

컨테이너 크기가 전체보다 크면 성장할 공간이 있으므로 flex-grow factor에 대해 신경을 쓸 것입니다.

컨테이너 크기가 전체 크기보다 작으면 축소해야 하므로 flex-shrink 계수에 신경을 쓸 것입니다.

융통성이 없는 품목은 모두 고정하십시오. 이는 특정 품목의 크기를 이미 결정할 수 있음을 의미합니다. flex-grow 를 사용하는 경우 여기에는 flex-grow: 0 이 있는 항목이 포함됩니다. 이것은 플렉스 아이템의 컨테이너에 공간이 남아 있을 때의 시나리오입니다. flex-grow 의 초기 값은 0이므로 최대 너비만큼 커지며 기본 크기에서 더 이상 커지지 않습니다.

flex-shrink 를 사용하는 경우 여기에는 flex-shrink: 0 이 포함된 항목이 포함됩니다. 플렉스 항목 세트에 0의 flex-shrink 계수를 제공하면 이 단계에서 어떤 일이 발생하는지 알 수 있습니다. 항목은 max-content 상태에서 고정되므로 컨테이너에 맞게 유연하지 않고 정렬되지 않습니다.

우리의 경우 - flex 항목의 초기 값으로 - 항목이 줄어들 수 있습니다. 따라서 단계가 계속되고 알고리즘은 할당하거나 제거할 공간을 계산하는 루프에 들어갑니다. 우리의 경우 항목의 전체 크기가 컨테이너보다 크므로 flex-shrink 를 사용하므로 공간을 제거해야 합니다.

flex-shrink 계수는 항목 내부 기본 크기 로 곱해집니다. 이 경우 max-content 크기입니다. 이것은 공간을 줄이는 값을 제공합니다. 항목이 flex-shrink 계수에 따라 공간을 제거한 경우 작은 항목은 모든 공간이 제거되어 본질적으로 사라질 수 있지만 큰 항목은 여전히 ​​축소할 공간이 있습니다.

이 루프에는 대상 기본 크기보다 작거나 커지는 항목을 확인하는 추가 단계가 있습니다. 이 경우 항목의 증가 또는 축소가 중지됩니다. 다시 말하지만, 이것은 특정 항목이 나머지 항목에 비해 작거나 커지는 것을 방지하기 위한 것입니다.

내가 좀 더 엣지 있는 시나리오를 보지 않았기 때문에 사양 측면에서 이 모든 것이 단순화되었으며, 일반적으로 Flexbox가 원하는 대로 작동하도록 하고 픽셀을 따르지 않는다는 가정 하에 간단히 생각할 수 있습니다. 완전. 다음 두 가지 사실을 기억하면 대부분의 경우 효과가 있습니다.

auto 에서 성장하는 경우 flex-basis 은 항목의 너비 또는 높이 또는 max-content 크기로 처리됩니다. 그런 다음 해당 크기를 시작점으로 사용하여 flex-grow 계수에 따라 공간이 할당됩니다.

auto 에서 축소하는 경우 flex-basis 은 항목의 너비 또는 높이 또는 max-content 크기로 처리됩니다. 그런 다음 공간은 flex-shrink 계수를 곱한 flex-basis 크기에 따라 제거되므로 항목의 최대 콘텐츠 크기에 비례하여 제거됩니다.

성장 및 축소 제어

나는 이 기사의 대부분을 Flexbox가 자체 장치에 맡길 때 무엇을 하는지 설명하는 데 사용했습니다. 물론 flex 속성을 사용하여 플렉스 항목을 더 잘 제어할 수 있습니다. 그들은 무대 뒤에서 무슨 일이 일어나고 있는지 이해함으로써 더 예측 가능하게 보일 것입니다.

고유한 flex-basis 를 설정하거나 항목 자체에 크기를 지정하여 flex-basis 로 사용하면 알고리즘에서 제어권을 되찾고 Flexbox에 이 특정 크기에서 늘리거나 줄이길 원한다고 알립니다. flex-grow 또는 flex-shrink 를 0으로 설정하여 확장 또는 축소를 모두 끌 수 있습니다. 그러나 이 시점에서 플렉스 항목을 제어하려는 욕구를 올바른 레이아웃 방법을 사용하고 있는지 확인하는 시간으로 사용할 가치가 있습니다. 플렉스 항목을 2차원으로 정렬하려는 경우 그리드 레이아웃을 선택하는 것이 더 나을 수 있습니다.

디버깅 크기 관련 문제

플렉스 항목이 예기치 않은 크기로 끝나는 경우 이는 일반적으로 플렉스 기반이 자동이고 해당 항목에 너비를 제공하는 항목이 있어서 플렉스 기반으로 사용되기 때문입니다. DevTools에서 항목을 검사하면 크기의 출처를 식별하는 데 도움이 될 수 있습니다. Flexbox가 항목 너비가 0인 것으로 처리하도록 하는 flex-basis 를 0 으로 설정할 수도 있습니다. 이것이 원하는 결과가 아니더라도 사이징 문제의 원인으로 사용 중인 flex-basis 값을 식별하는 데 도움이 됩니다.

플렉스 갭

Flexbox에서 많이 요청된 기능은 그리드 레이아웃 및 다중 열 레이아웃에서 간격을 지정할 수 있는 것과 동일한 방식으로 플렉스 항목 사이의 간격 또는 여백을 지정하는 기능입니다. 이 기능은 Box Alignment의 일부로 Flexbox에 대해 지정되었으며 첫 번째 브라우저 구현이 진행 중입니다. Firefox는 Firefox 63의 Flexbox에 대한 간격 속성을 제공할 것으로 예상합니다. 다음 예제는 Firefox Nightly에서 볼 수 있습니다.

그리드 레이아웃과 마찬가지로 공간이 플렉스 항목에 분배되기 전에 간격의 길이가 고려됩니다.

마무리

이 기사에서는 Flexbox가 플렉스 항목의 크기를 계산하는 방법에 대한 세부 사항을 설명하려고 했습니다. 약간 학문적으로 보일 수 있지만 이것이 작동하는 방식을 이해하는 데 시간이 걸리면 레이아웃에서 Flexbox를 사용할 때 엄청난 시간을 절약할 수 있습니다. Flexbox가 기본적으로 다양한 크기의 항목 묶음에 대한 가장 합리적인 레이아웃을 제공하려고 한다는 사실을 다시 생각하면 정말 도움이 됩니다. 항목에 더 많은 콘텐츠가 있으면 더 많은 공간이 제공됩니다. 당신과 당신의 디자인이 Flexbox가 생각하는 최선의 것에 동의하지 않는다면, 당신 자신의 flex-basis 를 설정함으로써 통제권을 되찾을 수 있습니다.