display flex의 flex-basis, flex-grow, flex-shrink

flex-basis 

display: flex

• flex-basis: 200px
•  
•  
•  

 

css code

.container {
	display: flex;
}
.item:nth-child(1) {
	flex-basis: 200px;
}

특정한 item의 size를 지정할 때, 사용합니다. 

contaier의 가로 사이즈가 늘어나면, 오른쪽 여백이 남고, 줄어들면 첫 번째 item의 가로 사이즈가 유연하게 줄어듭니다.

 

flex-grow 

display: flex

•  
• flex-glow: 1
•  
•  
•  

css code

.item:nth-child(2) {
    flex-grow: 1;
}

특정한 item의 size를 채울 때 사용합니다.

contaier의 가로 사이즈가 늘어나면, 두번째 item의 가로 사이즈가 유연하게 늘어나고, 줄어듭니다.

 

flex-shrink 

display: flex

• flex-shrink: 2
•  
•  
•  
•  
•  
•  

css code

.item:nth-child(1) {
    flex-shrink: 2;
}

특정한 item의 size만 줄여야 할 때, 사용합니다.

contaier의 가로 사이즈가 줄어들면, 첫번째 item의 가로 사이즈가 유연하게 늘어나고, 줄어듭니다.

0 -> 사이즈가 고정됩니다.

1 -> 기본값입니다. 다른 item들과 동일하게 줄어들고 늘어납니다.

2 -> 2배의 속도로 줄어듭니다.