CSS3에서 플렉스 값 1은 무엇을 의미합니까?

즉, "flex-grow" 항목의 확대 비율 값은 1, "flex-shrink" 항목의 축소 비율 값은 1, "flex-basis" 항목이 차지하는 공간은 "0"입니다. %"; flex는 "flex-grow, "flex-shrink, flex-basis"의 세 가지 속성 값의 약어입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3에서 1의 flex 값은 무엇을 의미합니까?

flex는 실제로 flex-grow flex-shrink flex-basis라는 세 가지 속성 값의 조합의 약어입니다.

구문: ​​

auto | none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

Definition:

• flex-grow: 항목의 확대 비율을 정의합니다. 기본값은 0입니다. 즉, 남은 공간이 있으면 확대되지 않습니다.

• flex-shrink: 항목의 축소 비율을 정의합니다. 기본값은 1입니다. 즉, 공간이 부족하면 항목이 축소됩니다.

• flex-basis: 초과 공간을 할당하기 전에 항목이 차지하는 공간을 정의합니다. 브라우저는 이 속성을 사용하여 기본 축에 추가 공간이 있는지 계산합니다. 기본값은 프로젝트의 원래 크기인 auto입니다. 값이 0이면 확장 가능한 것으로 간주되지 않도록 단위를 추가해야 합니다.

flex 속성은 flex-grow, flex-shrink, flex-basis의 약자로 기본값은 0 1 auto입니다. 마지막 두 속성은 선택 사항입니다.

상세 소개:

Flex-grow

flex-grow 속성은 항목의 확대 비율을 정의합니다. 즉, 남은 공간이 있으면 확대되지 않습니다. 모든 항목의 flex-grow 속성은 1 이며 남은 공간(있는 경우)을 균등하게 나눕니다. 한 항목의 flex-grow 속성이 2이고 다른 항목이 모두 1인 경우 전자는 다른 항목보다 남은 공간의 두 배를 차지합니다.

Flex-shrink

flex-shrink 속성은 항목의 축소 비율을 정의하며 기본값은 1입니다. 즉, 공간이 부족하면 항목이 축소됩니다. flex-shrink 속성은 항목의 축소 비율을 정의합니다. 기본값은 1입니다. 즉, 공간이 부족하면 항목이 축소됩니다.

모든 항목의 flex-shrink 속성이 1이면 공간이 부족할 때 비례하여 모두 축소됩니다. 한 항목의 flex-shrink 속성이 0이고 다른 항목이 1인 경우 전자는 공간이 부족해도 축소되지 않습니다.

Flex-basis

flex-basis 속성은 초과 공간을 할당하기 전에 항목의 기본 크기를 정의합니다. 브라우저는 이 속성을 사용하여 기본 축에 추가 공간이 있는지 계산합니다. 기본값은 프로젝트의 원래 크기인 auto입니다.

너비 또는 높이 속성과 동일한 값(예: 350px)으로 설정하면 항목이 고정된 공간을 차지합니다.

.item {
flex: 1;
}
/* 等同 */
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}

.item {
flex: auto;
}
/* 等同 */
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}

.item {
flex: none;
}
/* 等同 */
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}

.item {
flex: 1 2;
}
/* 等同 */
.item {
flex-grow: 1;
flex-shrink: 2;
flex-basis: 0%;
}

(동영상 공유 학습:

css 동영상 튜토리얼

)

위 내용은 CSS3에서 플렉스 값 1은 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!