Flexbox를 이용한 레이아웃 방법을 알아보자(2)

지난번에 이어 이번에는 Flexbox의 속성 중 내부아이템 속성을 알아보자

item에 적용되는 속성값은 grow, shrink, basis, align-self, order가 있다.

flex-grow는 아이템들이 컨테이너의 전체 크기에 맞게 스스로의 사이즈를 늘리려는 성질이다.

flex-grow의 기본값은 0이며 위 문서를 보면 원래의 크기보다 남은 공간이 더 넓어지자 해당 공간을 item1과 item2가 각각 2:1의 비율로 나눠 가져 사이즈가 커진것을 알 수 있다.

 

flex-shrink는 grow의 반대이다. 원래의 아이템 사이즈보다 컨테이너가 줄어들었을때 설정한 비율만큼 더 줄어 드는 것이다.

    flex-shrink의 설정값이 클 수록 더 많은 비율의 사이즈가 줄어드는 것을 볼 수 있다.

flex-basis는 설정값이 해당 사이즈의 비율이 된다.

이는 크기가 줄어들거나 늘어나도 설정한 비율을 유지한다.

 

align-self 는 align-container의 속성값을 item개인만 사용하는 속성이라 생각하면 쉽다.

 

마지막으로 order는 item의 순서를 바꾸는 아이인데 실질적으로 자주 사용되는속성은 아니고 이런것도 있구나 정도로 알아두면 될듯 하다.

아래 사이트는 내가 flex를 공부하면서 알게된 사이트인데 flex를 익히기는 매우 유용한 사이트인것 같아 링크첨부해둔다.

https://flexboxfroggy.com/