flex : auto, flex:1, flex:2, flex: initial축약형

flex 축약형 표현

• flex: initial;   =   flex: 0 1 auto;
• flex: auto;    =   flex: 1 1 auto;
• flex: none;   =   flex: 0 0 auto;
• flex: 1    =    flex: 1 0 auto;
• flex: 2    =   flex: 2 0 auto;

 

flex: initial = felx: 0 1 auto;

flex: initial로 지정하면 기본값이 적용 flex: 0 1 auto와 같은 효과를 나타내기 때문에

flex-grow가 0이기 때문에 flex-basis값보다 커지지 않고

flex-shrink가 1이기 때문에 컨테이너 공간이 부족하면 크기가 줄어들게 된다.

flex-basis가 auto이기 때문에 flex항목은 내부 컨텐츠 크기 만큼 공간을 차지하게 된다

 

 

내부 컨텐츠 크기만큼 공간을 차지

 

 

부모 컨텐츠 사이즈가 줄어들 경우 컨텐츠 크기가 줄어들게 된다.

 

---

 

flex: auto;    =   flex: 1 1 auto;

flex: auto는 flex: 1 1 auto;로 지정한 것과 동일 하다.

따라서 flex: initial과 비교했을 때 flex-shrink, flex-basis 속성은 동일하고 flex-grow속성이 1로 설정되어 있어서

여유 공간이 있을 경우 flex 항목들이 여유 공간을 나눠 가지게 된다.

 

여유공간이 생길경우 항목들이 늘어나서 여유공간을 채우게 된다.

 

---

 

 

flex: none;   =   flex: 0 0 auto;

flex: none으로 지정하면 flex:0 0 auto로 지정한 것과 동일하며 flex 항목은 내부 컨텐츠 크기와 동일한 상태에서

컨테이너 크기를 변경하더라도 flex 항목의 크기는 변화하지 않는다.

 

컨테이너 크기가 줄어들게 되면 그냥 가려지게 된다.

 

 

---

 

 

flex: 1    =    flex: 1 0 auto;

flex와 1, 2 처럼 숫자 하나만 나와있을 경우는 flex-grow속성의 숫자만 지정하고 나머지는 1 0으로 사용하게 된다.

 

컨테이너가 항목보다 큰 경우 여유 공간을 나눠가지게 된다.

 

컨테이너가 홍목보다 작은경우 내부 컨텐츠가 줄어들게 된다.