부분 단위 개요

구분 또는 분수 단위는 우리 삶에 큰 영향을 미칩니다. 왜? 최고의 다양성과 적응성을 제공하기 때문입니다! 그리드 분할을 처리하는 동시에 그 사이의 공간도 고려합니다. 그리드를 활용하는 모든 곳에 FR 장치를 통합할 수 있으며, Quick Stack 요소가 그리드를 활용하는 경우 퀵 스택을 사용자 정의할 때 FR 장치를 사용할 수 있습니다.

분수(1FR)란 무엇인가요?

분수 또는 1FR은 전체의 단일 부분을 나타냅니다. 단일 1FR 부분은 사용 가능한 공간의 100%에 해당합니다. 2개의 1FR 부분으로 각각은 사용 가능한 공간의 50%를 구성합니다. 따라서 이 시나리오에서 1FR은 사용 가능한 공간의 절반과 같습니다. 250개의 1FR 분수가 있다고 가정하면? 그러면 각 분수(1FR)는 1/250 또는 0.4%와 같습니다.

• 분수: 1FR = 1/FR의 총 수
• 백분율: 1FR = 100/총 FR 수

그렇다면 2분수(2FR)란 무엇일까요?

두 개의 분수 또는 2FR은 전체의 두 부분을 나타냅니다. 따라서 1FR + 1FR + 2FR이 있는 경우 1FR 분수는 각각 25%에 해당하고 2FR 분수는 50%를 의미합니다.

백분율이 아닌 분수

백분율 활용

각각 크기가 동일하고 사용 가능한 전체 영역을 차지하는 4개의 열로 구성된 그리드를 생성한다고 가정해 보겠습니다. 100을 4로 나누어 각 열에 25%의 너비를 할당할 수 있습니다.

그러나 한 열을 다른 열 크기의 두 배로 확대하려면 어떻게 해야 합니까? 이 경우 2X + X + X + X가 됩니다. 여기서 X는 25%에 남아 있으므로 총 125%가 됩니다. 한 열의 너비를 50%로 변경하면 열이 사용 가능한 공간을 25%만큼 초과합니다. 열의 너비는 백분율로 설정되므로 너비 값을 다시 보정하고 각 열의 크기를 다시 한 번 재조정해야 합니다.

다른 칼럼을 소개하고 싶다고 상상해 보세요. 이제 5개 열의 합계는 100이 되어야 합니다. 따라서 각각은 100/5 = 20%여야 합니다. 사용 가능한 공간이 넘치지 않도록 각 열의 값을 업데이트해야 합니다.

열을 포함하거나 제거하거나, 행이나 열의 크기를 수정하거나, 간격을 통합하거나, 백분율을 활용할 때 간격 크기를 변경해야 할 때마다 각 열의 크기를 다시 계산하고 새 크기 조정 값을 다시 구현해야 합니다. 각 열.

분수 활용(FR)

다시 한번, 그리드에 각각 크기가 같고 사용 가능한 전체 공간을 차지하는 4개의 열이 포함되기를 원한다고 가정해 보겠습니다. 이를 달성하려면 4개의 기둥을 설정하십시오. 그게 다야! 기본적으로 각 열의 너비는 1FR이며 사용 가능한 공간을 활용하기 위해 늘어납니다.

한 열의 크기를 다른 열의 두 배로 늘리려면 간단히 2FR로 지정하면 됩니다. 이는 전체의 2개 부분에 해당합니다. 여전히 1FR로 설정된 나머지 열은 각각 전체의 한 부분을 차지합니다.

행이나 열 추가 또는 제거

행이나 열을 추가하거나 지우려는 경우 크기를 조정할 필요 없이 이를 수행할 수 있습니다. FR을 사용하면 행과 열이 자연스럽게 조정됩니다.

격차를 통합하거나 변경

FR 단위를 활용하면 그리드에 간격을 포함할 수 있으며 행과 열이 자동으로 조정됩니다.

FR과 내용

1FR은 행이나 열 셀 내에 포함된 내용이 조정 가능한 경우(즉, 열이나 행에 맞게 크기 조정이 가능한 경우) 전체의 한 부분을 나타냅니다. 그럼에도 불구하고 콘텐츠 크기 조정이 중지되면 FR 값이 있는 행이나 열이 콘텐츠를 수용할 수 있도록 조정됩니다. 다른 열과 행은 비례적으로 축소됩니다.

• 해야 한다 열 너비가 고정된 그리드 하위 항목이 포함된 경우 열의 너비는 항상 그리드 하위 항목의 너비와 같거나 이를 초과합니다. 또한 열의 너비는 텍스트 요소 내에서 가장 긴 단어보다 작을 수 없습니다. 오버플로: 숨김을 그리드 하위 항목에 적용하면 이 문제를 제거할 수 있습니다.
• 만약 열 높이가 고정된 그리드 하위 항목이 있는 경우 행의 높이는 항상 그리드 하위 항목의 높이와 같거나 그보다 높습니다. 그리드 하위 항목에 Overflow:hidden을 사용하여 이 문제를 해결할 수 있습니다.

최소/최대

FR은 동봉된 콘텐츠에 맞는 최소값을 자동으로 설정합니다. 따라서 FR의 경우 최소값은 자동(즉, 자동)이고 최대값은 사용자가 설정한 값(예: 1FR, 2FR 등)에 해당합니다.

다음에서 전환하여 이 최소값을 대체할 수 있습니다. 기본 에게 최소 최대 ~을 위한 사이징. 최대값은 1FR이고 최소값은 선택한 값이 될 수 있습니다. 그러나 지정한 최소값을 초과하는 고정 너비의 콘텐츠는 셀을 오버플로하게 된다는 점에 유의하세요.