CSS의 flex 속성은 다음과 같은 약어입니다. 플렉스 성장, 플렉스 수축, 그리고 플렉스 기반. 이는 플렉스 아이템에서만 작동하므로 컨테이너의 아이템이 플렉스 아이템이 아닌 경우 몸을 풀다 속성은 해당 항목에 영향을 미치지 않습니다.

이 속성은 유연한 항목의 길이를 설정하는 데 사용됩니다. 이 CSS 속성을 사용하면 하위 요소와 기본 컨테이너의 위치를 ​​쉽게 지정할 수 있습니다. 플렉스 아이템이 공간에 맞게 줄어들거나 늘어나는 방식을 설정하는 데 사용됩니다.

그만큼 몸을 풀다 속성은 하나, 둘 또는 세 개의 값으로 지정할 수 있습니다.

• 단일 값 구문이 있는 경우 값은 숫자이거나 다음과 같은 키워드여야 합니다. 없음, 자동, 또는 초기의 .
• 두 값 구문이 있는 경우 첫 번째 값은 숫자여야 합니다(다음과 같이 사용됨). 유연하게 성장하다 ), 두 번째 값은 숫자일 수 있습니다( 플렉스 수축 ) 또는 유효한 너비 값(으로 사용됨) 플렉스 기반 ).
• 세 개의 값 구문이 있는 경우 값은 다음 순서를 따라야 합니다. 숫자 에 대한 플렉스 성장, ㅏ 숫자 에 대한 플렉스 수축, 그리고 유효한 너비 가치 플렉스 기반 .

통사론

 flex: flex-grow flex-shrink flex-basis | auto | none | initial | inherit; 

속성 값

플렉스 성장: Flex-Grow Factor를 결정하는 단위 없는 양의 숫자입니다. 다른 유연한 항목과 비교하여 항목이 얼마나 늘어나는지 지정합니다. 음수 값은 허용되지 않습니다. 생략하면 다음 값으로 설정됩니다. 1 .

플렉스 수축: 플렉스 축소 인자를 결정하는 것은 단위 없는 양의 숫자입니다. 다른 유연한 항목과 비교하여 항목이 얼마나 줄어들지 지정합니다. 음수 값은 허용되지 않습니다. 생략하면 다음 값으로 설정됩니다. 1 .

플렉스 기반: 플렉스 아이템의 초기 길이를 정의하는 상대 또는 절대 단위의 길이입니다. 플렉스 아이템의 길이를 설정하는 데 사용됩니다. 그 값은 다음과 같습니다. 자동차, 또는 숫자 뒤에 길이 단위가 옵니다. em, px, 등. 음수 값은 허용되지 않습니다. 생략하면 다음 값으로 설정됩니다. 0 .

자동: flex 속성의 이 값은 다음과 같습니다. 1 1 자동 .

없음: flex 속성의 이 값은 다음과 같습니다. 0 0 자동 . 플렉스 아이템을 늘리거나 줄이지 않습니다.

초기의: 속성을 기본값으로 설정합니다. 이는 다음과 같습니다. 0 0 자동 .

상속하다: 상위 요소로부터 속성을 상속합니다.

예

이 예에는 각각 3개의 플렉스 항목이 있는 3개의 컨테이너가 있습니다. 그만큼 너비 그리고 컨테이너의 높이는 300px 그리고 100px .

우리는 플렉스: 1; 첫 번째 컨테이너의 플렉스 아이템에, 플렉스: 0 50px; 두 번째 컨테이너의 플렉스 아이템에 플렉스: 2 2; 세 번째 컨테이너의 플렉스 아이템에.

 CSS flex Property .container { width: 200px; height: 100px; border: 1px solid black; display: flex; margin: 15px; background-color: blue; } .flex-item{ flex: 1; // unitless number: flex-grow } .flex-item1{ flex: 0 50px; // flex-grow, flex-basis } .flex-item2{ flex: 2 2; // flex-grow, flex-shrink } .flex-item, .flex-item1, .flex-item2 { background-color: lightblue; margin: 4px; } <h3> flex: auto; </h3> <h3> flex: 0 1 30px; </h3> 

산출