flex item 의 순서 및 너비와 비율 속성
✏ order
order는 플렉스 아이템 속 요소들의 순서를 정하는 속성으로 order의 수가 작을수록 먼저 정렬된다.
기본적으로 모든 요소는 0이라는 기본값을 가지고 있어서 동일선상에 있다.
order의 수는 음수, 0, 양수를 적을 수 있다.
order 속성의 가장 큰 장점은
작업 중 html의 구조를 변경하지 않아도 화면의 출력되는 요소의 순서를 그때 그때 변경할 수 있다.
✏ flex-grow
flex-grow 플렉스 아이템의 너비를 비율로 넓히는 속성이다.
보통 플렉스 아이템들의 flex-grow는 0으로 기본값으로 지정되어있으며, 만약 너비를 비율로 넓히고 싶다면
수로 입력하면 된다.
여기에 가로 width 100px, height 100px인 플렉스 아이템이 있다. 지금은 요소의 너비가 넓혀지지 않은 상태다.
item 1에 flex-grow :1;으로 입력하니 나머지 item 2,3는 고정이고 item 1의 너비가 넓어져있는 걸 볼 수 있었다.
item에 위의 숫처럼 flex-grow를 입력하니 입력된 비율 item 3을 기준으로 2대 1의 비율로 늘어나 차지하는 것을 볼 수 있었다.
✏ flex-shrink
flex-shrink는 플렉스 아이템을 플렉스 컨테이너의 너비에 따라 비율로 줄이는 속성이다.
모든 요소는 flex-shrink가 1로 기본값으로 지정되어 있다. 그렇기에 컨테이너의 크기를 줄이면 자동으로 아이템들도 크기가 줄어들게 되는데 이는 flex-shrink가 1로 지정되어 있기 때문이다. 그럼 그림으로 살펴보갰다.
여기에 item들이 있다. width와 height는 각각 100px로 지정되어 있다.
아까 말했던 것처럼 기본적으로 모든 아이템 요소들은 flex-shrink가 1로 지정되어 있다.
그렇기에 이렇게 컨테이너의 넓이를 줄이니 아이템의 넓이도 같이 줄어 출력되었다.
그럼 이번엔 flex-shrink를 0으로 각 아이템마다 적용해주겠다.
.container .item:nth-child(1){
flex-shrink: 0;
}
.container .item:nth-child(2){
flex-shrink: 0;
}
.container .item:nth-child(3){
flex-shrink: 0;
}
그랬더니 컨테이너의 길이는 줄어들어도 아이템들의 크기 요소는 줄어들지 않는 모습을 볼 수 있었다.
그러므로 만약 실 사용에서 플렉스 컨테이너의 넓이가 줄어들어도 아이템이 출력되는 비율에 영향을 받고 싶지 않다면 flex-shrink를 0으로 지정해야 한다.
✏ flex-basis
flex-basis는 플렉스 아이템의 공간 배분 전 기본 너비를 뜻한다. 보통은 auto로 설정되어 있으며 요소의 내용(content)의 너비이다. 또한 flex-basis는 혼자 사용하면 효과가 없으며 꼭 flex-grow와 함께 써야지 원하는 비율로 설정할 수 있다.
그림을 보면 아이템의 내용을 제외한 비율로 1 : 1 : 2 비율로 설정되어있다.
그럼 기본값인 auto를 제외하고 flex-basis 0으로 설정 헤보겠다.
.container .item:nth-child(1){
flex-grow: 1;
flex-basis: 0;
}
.container .item:nth-child(2){
flex-grow: 1;
flex-basis: 0;
}
.container .item:nth-child(3){
flex-grow: 2;
flex-basis: 0;
}
flex-basis 0으로 설정하여 컨테이너의 비율 설정 시 아이템 안의 내용도 함께 포함하여 설정되는 것을 볼 수 있었다.
간혹 flex-basis에 px, cm 등 단위를 사용하여 설정할 수 있으나 잘 사용하지 않는다고 한다.
\( ˙▿˙ )/ 감사합니다!