여백은 Flexbox 레이아웃의 Flex-Grow 크기 조정에 어떤 영향을 줍니까?

Flex-Grow를 사용하여 Flex 요소 크기 조정

Flexbox 레이아웃에서 Flex 항목의 크기는 flex-grow에 따라 결정됩니다. 각 항목이 차지해야 하는 여유 공간을 지정하는 속성입니다. 그러나 콘텐츠 및 여백을 포함하여 플렉스 항목의 계산된 크기에 영향을 미칠 수 있는 특정 요소가 있습니다.

문제 개요

다음 코드를 고려하세요.

.numbers {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

#number0 {
    flex-grow: 2;
}

#colon {
    flex-grow: 1;
}

<div class="numbers">
    <div class="row">
        <div class="button number">

이 예에서는 "0" 버튼의 폭이 2배 더 넓어질 것으로 예상됩니다. 다른 버튼과 콜론 버튼의 너비는 절반으로 줄어듭니다. 그런데 이 버튼들의 배열이 살짝 어긋난 것 같습니다.

문제 원인

이 문제는 각 줄에서 사용할 수 있는 공간이 다음과 같이 결정되기 때문에 발생합니다. 버튼의 전체 너비와 버튼에 적용된 여백. 이 예에서 처음 세 행에는 각각 두 개의 가로 여백이 있고 네 번째 행에는 하나만 있습니다. 그 결과 네 번째 행에 다른 행보다 여유 공간이 더 많아지고 이는 Flex 항목 간의 공간 분배에 영향을 미칩니다.

보다 안정적인 크기 조정을 위해 Flex-Basis 사용>

이 문제를 해결하려면 대신 flex-basis를 사용하는 것이 좋습니다. flex-grow 플렉스 항목의 크기를 보다 안정적으로 조정합니다. Flex-basis는 콘텐츠와 여백을 고려하여 항목의 초기 크기를 설정합니다. 각 버튼에 flex-basis를 지정하면 여백에 관계없이 모든 버튼에 동일한 공간이 제공되도록 할 수 있습니다.

수정된 코드는 다음과 같습니다.

.button {
    flex-basis: 33.33%;
}

#number0 {
    flex-basis: calc(66.67% + 10px);
}

* {
    box-sizing: border-box;
}

By 플렉스 기반을 업데이트하면 원하는 버튼 정렬을 얻을 수 있습니다. "0" 버튼은 다른 버튼의 두 배 너비이고 콜론 버튼은 너비의 절반입니다. 넓습니다.

위 내용은 여백은 Flexbox 레이아웃의 Flex-Grow 크기 조정에 어떤 영향을 줍니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!