이제 container가 아니라 item에 부여하는 flex 관련 속성들에 대해 알아보자.
- order : Flex Item의 정렬 순서를 부여한다. 기본값은 순서가 없는 0이고, 숫자값이 작을 수록 먼저 정렬된다.
- flex-grow : Flex Item의 증가 너비 비율을 결정하는 속성. 기본값은 0이고 숫자값을 통해 증가 비율을 지정해 줄 수 있다. 간단하게 실습으로 알아보자!
예를 들어 아래와 같이 요소들이 있을 때,
1번 요소에 flex-grow 값을 1을 주면, 2 3번 요소는 증가 비율이 0인 상태이므로 나머지 공간을 1번 요소가 모두 차지한다.
2번 요소에 값을 2를 주고 3번 요소에 1을 주면, 증가 비율이 0인 1번 요소를 제외한 나머지 공간을 2와 3번 요소가 2대 1의 비율로 차지하게 된다.
- flex-shrink : Flex Item의 감소 너비 비율을 지정하는 속성. 기본값이 Flex Container 너비에 따라 감소 비율을 적용하는 1이고, 숫자값을 통해 감소 비율을 조절할 수 있다. 만약 값을 0을 주면 감소 너비가 없는 것과 같다. 그러면 어떤 화면이 출력될까?
아래와 같이 요소들에 가로 세로 100px을 주었는데 container의 크기가 충분하므로 공간이 남는다.
이 때 container의 크기를 줄였더니, 정사각형이던 요소들이 찌그러졌다. 기본적으로 flex-shrink 값이 1이 적용되어있기 때문에 container의 크기가 줄어든 비율만큼 요소들도 줄어들었다.
여기서 flex-shrink 값에 0을 주면 container의 크기에 상관없이 요소 원래의 크기를 유지할 수 있다!
- flex-basis : Flex Item의 공간 배분 전 기본 너비 지정 요소. 기본값은 요소의 content 너비인 auto이고, 단위를 줘서 값을 지정할 수 있다. 요소에 flex-grow 값을 줘서 증가 너비 비율을 지정할 때, flex-basis의 값이 auto로 되어있으면 content, 즉 '글자가 들어있는 내용의 값을 제외'하고 지정된 증가 너비 비율대로 늘어난다. 내용과 상관없이 요소 전체의 너비를 맞추고 싶으면 flex-grow에 원하는 비율대로 값을 넣어주고, flex-basis 값을 다 0으로 넣어주면 된다.
※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
'etc... > 패스트캠퍼스 챌린지' 카테고리의 다른 글
패스트캠퍼스 챌린지 20일차 - Part1. Ch8 (0) | 2021.11.20 |
---|---|
패스트캠퍼스 챌린지 19일차 - Part1. Ch8 (0) | 2021.11.19 |
패스트캠퍼스 챌린지 17일차 - Part1. Ch8 (0) | 2021.11.17 |
패스트캠퍼스 챌린지 16일차 - Part1. Ch8 (0) | 2021.11.16 |
패스트캠퍼스 챌린지 15일차 - Part1. Ch8 (0) | 2021.11.15 |