Flex 1 1 auto?

flex 1 1 auto란?

 

 

flex: 1 1 auto

flex-grow/ flex-shrink/ flex-basis 에 대해 차례대로 표현된 것이다.

 

- flex-grow: 부모 영역이 자식 영역보다 넓은 경우 남은 공간을 분배하는 비율을 말한다.

 

- flex-shrink: 부모 영역이 자식 영역보다 작을 경우 줄어드는 비율을 말한다.

 

- flex-basis: 항목의 기본크기. auto는 기본 값이며 안에 컨텐츠의 크기 만큼의 영역을 사용합니다.

 

Q. flex: 0 0 100px; 라면?

 

flex: 0 0 100px;

 

 

늘어나거나 줄어드는 것 없이 100px이 고정으로 지정됩니다.