플렉스 속의 플렉스 성장 값 생략

Question

https://www.w3.org/TR/css-flexbox-1/#propdef-flex에서 flex 속기를 사용하면 flex-grow을 생략하면 1로 설정됩니다. 처음에는 어떻게 생략 할 수 있습니까?

Answer 1

은 참조, 또한이 말한다 당신 :

이

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

이중 바 (||가) 두 개 이상의 옵션을 분리하고, 하나 이상의 (source)를 지정해야합니다.

flex: auto 

또는

flex: 250px 

또는

flex: 33% 

위의 모든 flex-basis 요소를 지정

이

는 flex-grow 속성이 뭔가를 기록함으로써 생략 될 수 있음을 의미 .

(생략 된) flex-shrink의 기본값은 1로 지정되어 있습니다.

(생략 된) flex-grow은 사양에 정의 된대로 1로 기본 설정됩니다.

참고로 값 구문에서 물음표 (?)는 앞의 속성이 선택 사항임을 의미합니다. 즉, 브라우저에서 다음과 같은 내용을 볼 때 flex: 2 15em 일 때 flex-shrink은 선택 사항이며 기본값은 1 (source)이기 때문에 단위가없는 숫자는 flex-grow에 적용됩니다.

Answer 2

간단히 작성하면 flex: 1입니다.

flex-grow: 1; 
flex-shrink: 1; 
flex-basis: 0%; 

그래서 flex-grow은 기본적으로 1로 설정이 쓰기에 대한 속기입니다. 수동으로 같은 것을 지정하는 경우

는 :

flex: 1; 
flex-shrink: 0; 

그런 다음 flex-shrink는 0 될 것이며, flex-grow는 여전히 1 될 것입니다.

또한 flex을 사용하려면 부모에게 display: flex이 필요합니다.

희망이 도움이됩니다. :) 같은 flex property definition에서