핫하게 떠오르는 flex 속성 공부해보자(2)

이번 포스트는 item에게 주는 속성을 알아볼거에요

유용한 속성들이 많으니 집중해봅시다

1.flex-basis

👉 아이템의 기본크기

아이템의 기본 크기를 정할때 씁니다

	
#container{
   display: flex;
   background: rgb(248,243,239);
}

.item{
    flex-basis:200px;
    border: 1px solid #000;
    font-size: 133px;
}
	

flex-basis 를 주면 아이템이 너비가 200px로 변하죠?

flex기반에서는 flex-basic 이 width 값보다 우선순위가 높기 때문에 

flex-basic으로 기본크기를 지정해주는게 좋습니다.

기본값

auto

2.flex-grow

👉 아이템의 너비 비율

css작업하다보면 각 요소에 비율을 주고 싶을때 넓이를 비율로 계산하지요?

얼마나 귀찮습니까..

grow는 그걸 해결해줍니다!!

이미지보면서 설명해볼게요

일단 컨테이너에 넓이 1200px를 줄게요

아이템이 현재 너비가 200px 이니까

컨테이너에 200px의 여백이 남죠? 저 여백을 기억해두고..!!

basis를 잠시 주석하고

아이템에 flex-grow:1 을 줄게요

	
.item{
  flex-gorw:1;
   /*flex-basis:200px;*/
   border: 1px solid #000;
   font-size: 133px;
   font-weight: 700;
}
	

아이템들이 컨테이너에 맞게 너비가 변했죠?

우리가 적용한 grow의 값 1 비율로요

gorw는 컨테이너에 너비에 맞게 아이템의 비율이 계산됩니다

그럼 여기서 문득 이런생각이 듭니다

아 grow 값이 1이면 1:1비율로 맞춰지는 거구나

아닙니다.ㅎㅎ

아까 제가 기억해두라고한 여백있죠?

바로 그 여백을 컨테이너가 각각의 아이템들 에게 1의 비율로 나눠준것입니다.

진짜인지 확인해볼까요? 

아이템 2번에 안녕이라고 텍스트를 바꿔볼게요

아까랑 비율이 달라졌죠?

분명 2번의 너비가 한눈에 보기에도 다른 아이템들이랑 다릅니다 

grow값은 여전히 1인데 말이죠

이로써 확인할 수 있는게 컨테이너의 여백을

아이템에게 1씩 나눠준거죠

어때요 정확히 1의 비율이죠?

근데 우린 진짜 아이템의 1:1 비율을 원하죠

여기서 flex-basis:0 을 줍니다

우리가 원하는 1 비율로 바뀌었습니다.

아이템 기본너비가 0이되어 컨테이너가

전부 여백으로 인식해서 1의비율이 맞춰진거죠!

grow의 기본값은 0 이기때문에 

0일경우엔 비율이 맞춰지지 않습니다 

유의해 둡시다

기본값

0

3.flex-shrink

👉 아이템의 너비 감소 비율

shrink 는 gorw와 반대 속성인데요.

너비값(width,basis)이 있을때 적용되며

창이 줄어들었을때 진가를 발휘합니다.

확인하기위해 

컨테이너의 width값을 빼고 아이템에 basis값을 줄게요

그리고 shrink를 1로 넣어줍시다

#container{
   display: flex;
   background: #000;
}

.item{
   /* flex-grow:1; */
   flex-shrink:1;
   flex-basis:200px;
   border: 1px solid #000;
   font-size: 133px;
   font-weight: 700;
}
	

자 그럼 창을 줄여봅시다

저 빨간선이 창이 줄어들때 컨테이너에 영향을 미치기 시작하는 부분입니다

창넓이가 컨테이너보다 작으면 컨테이너는 줄어드니까요

빨간선을 넘어서면 아이템들이 줄어들겠죠

바로 이렇게 말이죠

이번엔 2번에다가 shrink값을 2를 줄게요

그럼 어떻게 줄어드는지 볼까요

	
.item:nth-child(2){
   flex-shrink:2;
   background: #354bf6;
}
	

2가 다른 아이템들과 다르게 확실히 줄어들었습니다

shrink는 창이 줄어들때 컨테이너에 영향을 미치기 시작하는 순간부터

아이템이 줄어듭니다.

1,3,4,5번은 shrink 값이 1이고 2는 2였죠?

창이 줄어들때 1,3,4,5,는 3분의 1만큼 너비가 줄어들고

2번은 3분의 2만큼 줄어드는 것입니다.

basis가 200px 이였잖아요

그 너비에서 1,3,4,5번은 3분의1씩 2번은 3분의2 만큼 각각 줄어드는거죠

값이 0일경우엔 적용안되고

기본값은 1입니다

기본값

1

4.flex

👉 flex 단축 속성

지금까지 배운 위에 3가지 속성을 단축해 놓은 속성이 있습니다

바로 flex ..!!!

⭐flex : flex-grow flex-shrink flex-basis⭐

	
.item{
   flex:1 1 0;

   /*grow를 제외한 나머지 속성 생략*/
   flex:1; 
}
	

flex:1 은 flex-grow:1과 같은 것입니다.

그럼 뒤에 속성들은 생략했으니 기본값으로 적용되겠죠?

flex:1 1 0 으로요

엇 basis는 기본값이 auto인데 0이라니 뭔소리인가 싶죠?

flex속성에서는 basis가 0으로 기본값 처리되어 나옵니다.

알아서 비율을 계산해주겠다는 거죠 ~ 너무나 똑똑하고 편리한 속성..!!!

auto로 바꾸고 싶으면 auto로 바꾸면 됩니다

4.align-self

👉 아이템정렬

아이템을 정렬하고 싶을때 쓰는 속성입니다.

align-items는 컨테이너에 align-self 는 아이템에 속성을 줍니다.

2번 아이템을 한번 아래로 정렬해볼까요

컨테이너에 여백이 있어야하니 높이값을 주고

아이템에 flex-end값을 줘볼게요

	
.item:nth-child(2){
  align-self:flex-end;
  background: #354bf6;
}
	

오 2번이 아래로내려갔습니다

이속성도 잘 쓰일거같아요 기억해둡시다

auto	부모의 align-items 값을 상속(기본)
stretch	컨테이너의 교차축을 채움
flex-start	컨테이너의 시작선에 배치
flex-end	컨테이너의 끝선에 배치
center	아이템을 컨테이너의 가운데에 배치
baseline	아이템을 문자 기준선에 정렬

5.order

👉 아이템 순서변경

아이템의 순서를 변경할 수 있습니다.

값에 적용할 순서의 숫자를 넣어주면 되는데요

한번 순서를 바꿔보겠습니다.

	
.item:nth-child(1){order:4;background: #f60b34;}
.item:nth-child(2){order:3;background: #354bf6;}
.item:nth-child(3){order:2;background: #f6ff00;}
.item:nth-child(4){order:5;background: #ff0dd4;}
.item:nth-child(5){order:1;background: #0dff00;}
	

숫자가 바뀌었네요 

값에 음수를 넣을수가 있는데요

음수를 넣으면 순서가 맨앞으로 바뀝니다 

4번을 음수를 사용해 맨앞으로 옮겨볼게요

	
.item:nth-child(4){order:-1;background: #ff0dd4;}
	

바뀌었죠?

이 속성도 아주 요긴하게 쓰일거 같아요

지금까지 flex item에 적용하는 속성을 알아봤습니다.

한번씩 속성을 적용해보면 더 도움이 될것같아요