CSS 플렉스 속성

정의와 사용법

flex는 다음 속성의 약자 속성입니다：

flex는 유연한 항목의 유연한 길이를 설정합니다。

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

另请参阅：

教程： CSS 유연한 프레임워크

참조:CSS 플렉스 베이스 속성

참조:CSS 플렉스 디렉션 속성

참조:CSS 플렉스 플로우 속성

참조:CSS 플렉스 그로우 속성

참조:CSS 플렉스 샤rink 속성

참조:CSS 플렉스 웨이프 속성

참조:HTML DOM flex 속성

예제

내용이 어떤 것인지 관계없이 모든 유연한 항목의 길이를 동일하게 만듭니다:

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

직접 시도해 보세요

CSS 문법

flex: flex-grow flex-shrink flex-basis|auto|initial|thuộc;

속성 값

값 설명
flex-grow 숫자, 항목이 나머지 유연한 항목에 비해 증가되는 양을 규정합니다.
flex-shrink 숫자, 항목이 나머지 유연한 항목에 비해 축소되는 양을 규정합니다.
flex-basis

항목의 길이

허용된 값: "auto"、"thuộc" 또는 "%"、"px"、"em" 단위의 값, 또는 다른 길이 단위.
auto 1 1 auto와 동일합니다.
initial 0 0 auto와 동일합니다. 참조: initial。
none 0 0 auto와 동일합니다.
thuộc 부모 요소에서 이 속성을 thừa kế합니다. 참조: thuộc。

기술 세부 사항

기본 값: 0 1 auto
thừa kế: 아니요
애니메이션 제작: 지원됩니다. 별도의 속성을 확인하세요. 참조:애니메이션 관련 속성。
버전: CSS3
JavaScript 문법: object.style.flex="1"

더 많은 예제

flex와 미디어 쿼리를 결합하여 다른 스크린 크기/장치에 대해 다른 레이아웃을 만듭니다:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* 반응형 레이아웃 - 두 열 레이아웃 대신 단일 열 레이아웃(100％)을 만듭니다. */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

직접 시도해 보세요

브라우저 지원

표에서의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

prefix를 사용하는 첫 번째 버전의 숫자를 나타냅니다. -webkit-、-ms- 또는 -moz-

크롬 IE / 엣지 파이어폭스 사파리 오페라
29.0
21.0 -webkit-		 11.0
10.0 -ms-		 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0