flex 1 1 auto / flex 0 0 100px

 

flex 코딩에서 흔히 볼 수 있는 1 1auto 속성

flex : 1 1 auto;

 

 

앞에서

flex-grow, flex-shrink, flex-basis 에 대해서 설명했었는데요

이 3가지를 한꺼번에 표현한 것입니다.

 

 

https://moo-you.tistory.com/380

flex-grow 사용법

 

 

https://moo-you.tistory.com/385

flex-shrink 속성

 

https://moo-you.tistory.com/383

flex-basis란?

 

 

따라서  flex: 1 1 auto;를 주게 되면

.item {
    flex:1 1 auto;
}

 

아래와 같은 결과 값이 나타납니다.

 

순서대로 

flex : flex-grow flex-shrink flex-basis;

• 맨 앞에는 flex-grow 즉 부모 영역이 자식 영역 보다 넓은 경우 남은 공간을 분배하는 비율을 말합니다.
• 두 번째 는 flex-shrink 부모 영역이 자식 영역보다 작을 경우 줄어드는 비율을 나타냅니다.
• 마지막은 flex-basis로 항목의 기본크기를 말합니다. auto는 기본값이며 안에 컨텐츠의 크기 만큼의 영역을 사용합니다.

즉 위에 flex:1 1 auto;를 했을 경우 결과 값을 보면 부모 영역의 공간이 더 넒기 때문에 flex-grow : 1; 이 실힝되어 같은 비율로 남은 공간을 가져가기 됩니다.

그런데 2번째 영역이 더 큰 이유는 flex-basis : auto;로 지정되어있기 때문에 item박스안에 컨텐츠의 길이에 맞춰서 가장 넓은 공간을 차지하게 됩니다.

 

 

만약 부모창 영역이 자식 영역보다 줄었을 경우에는 flex-shrink 속성이 실행되어 같은 비율로 줄어들게 됩니다.

 

 

flex 0 0 100px로 지정할 경우 늘어나거나 줄어드는거 없이 100px이 고정으로 지정됩니다.

flex: 0 0 100px;

 

 

 

 

아래와 같이 한 영역만 따로 지정할 수도 있습니다.

전체적으로  flex-basis: auto로 지정했지만 2번째 영역만 100px로 지정했기 때문에 컨텐츠 영역이 제일 길지만 100px만큼의 크기만 가집니다. 여기에 2번째 영역만 flex-grow:2로 지정되어있기 때문에 남은 영역을 2배 더 가지게 됩니다.

.item {
    flex: 1 1 auto;
}

.item:nth-child(2) {
    flex:2 1 100px;
}