Style flex 속성

정의와 사용법

flex 속성은项目的长度，相对于同一容器内的其余弹性项目。

flex 속성은 flexGrow, flexShrink, flexBasis 속성의 약자 속성입니다.

비고：요소가 유연한 항목이 아니면 flex 속성이 유효하지 않습니다。

다른 참조도 참조하십시오：

CSS 참조 매뉴얼：flex 속성

HTML DOM STYLE 참조 매뉴얼：flexBasis 속성

HTML DOM STYLE 참조 매뉴얼：flexDirection 속성

HTML DOM STYLE 참조 매뉴얼：flexFlow 속성

HTML DOM STYLE 참조 매뉴얼：flexGrow 속성

HTML DOM STYLE 참조 매뉴얼：flexShrink 속성

HTML DOM STYLE 참조 매뉴얼：flexWrap 속성

예제

콘텐츠와 관계없이 모든 유연한 항목의 길이를 동일하게 만듭니다:

for (i = 0; i < y.length; i++) {
  y[i].style.flex = "1";
}

직접 시도해보세요

문법

flex 속성 반환:

object.style.flex

flex 속성 설정:

object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"

속성 값

값 설명
flex-grow 숫자, 다른 유연한 항목에 비해 늘일 양을 정의합니다.
flex-shrink 숫자, 다른 유연한 항목에 비해 줄일 양을 정의합니다.
flex-basis

항목의 길이

허용된 값: "auto", "inherit" 또는 "%", "px", "em" 단위의 값, 또는 다른 길이 단위.
auto 1 1 auto와 동일합니다。
initial 0 1 auto와 동일합니다. initial을 참조하십시오。
none 0 0 auto와 동일합니다。
inherit 부모 요소에서 이 속성을 상속받습니다. 참조하십시오 inherit。

기술 세부 사항

기본 값： 0 1 auto
반환 값： 문자열, 요소의 flex 속성。
CSS 버전： CSS3

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 11.0 지원 9.0 지원