🔍 flex-grow 란?
부모 요소가 flexbox 일때, 그 안에 속한 flex 아이템들이 기본 크기 보다 더 커질수 있는지 결정하고, 플렉스 박스 내부에서 할당 받을 수 있는 공간을 상대적으로 정의하는 속성이다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex 정리</title>
<style>
*{
box-sizing: border-box;
}
body {
margin: 0;
}
ul{
display: flex;
padding: 0;
list-style: none;
height: 300px;
border: 5px solid red;
}
li{
background: beige;
}
li:nth-child(2n){
background-color: aquamarine;
}
</style>
<script>
</script>
</head>
<body>
<div class="listContainer">
<ul>
<li>거북이</li>
<li>호랑이</li>
<li>나비</li>
<li>청설모</li>
<li>뱀</li>
<li>고라니</li>
</ul>
</div>
</body>
</html>
이런식의 li 태그들이 있다고 가정했을때, li갯수에 맞게 높이와 넓이가 채워진 것을 확인할 수 있다.
li{
background: beige;
flex-grow: 1;
} 
여기서 flex : 1 속성을 주면 넓이와 높이가 컨테이너에 딱 맞게 채워지는 걸 볼 수 있다.
li:nth-child(2){
flex-grow: 1;
}
li:nth-child(3){
flex-grow: 2;
} 
이와 같이 flex-grow 속성을 각각 1과 2로 주니 나비가 호랑이 보다 2배 넓게 크기를 차지하게 되는걸 볼 수 있다.
🔍 flex-shrink 란?
flex-shrink 는 flex-grow 와 반대로 부모 요소가 flex 일때, 그 안에 속한 요소들을 상대적으로 줄여주는 효과를 가진다.
flex-shrink의 기본값은 grow와 반대로 값을 주면 줄수록 크기가 줄어들고, 화면의 창이 줄어들때 그 효과가 드러난다.
li:nth-child(2){
flex-shrink: 30;
}
브라우저 창의 크기를 줄였을때 2번째 li 만 크기가 줄어드는것을 확인할 수 있다.
🔍 flex-basis 란?
플렉스 아이템의 초기 크기를 지정한다. box-sizing이 따로 설정되지 않은 경우에 콘텐츠의 박스 크기를 결정하게 된다.
li:nth-child(2){
flex-basis: 200px;
}
li:nth-child(4){
flex-basis: 100px;
} 
위의 basis 설정값을 주니 2번째와 4번째 li 크기가 변하였다.
🔍 flex 란?
flex는 위의 grow, shrink, basis 속성을 한번에 결정할수 있는 속성이다.
.item{
flex : 0 0 200px /* 순서대로 grow, shrink, basis 속성*/
}위의 설정을 예로 든다면, grow 도 기본값, shrink도 기본값이고 basis 는 200px 이니,
200px 보다 커질수도, 작아질수도 없게 아이템의 크기를 설정해 놓은 것이다.
li:nth-child(2){
flex: 1; /* flex : 1 1 0; 과 같음*/
}
flex : 1; 은 flex : 1 1 0; 속성과 같은데, grow값이 1이니 화면에 꽉차게 드러나고
shrink는 기본값이라서 줄이더라도 아무런 변화가 일어나지 않는다. 또한 basis값을 0을 주었지만 grow가 1이라서 화면에 꽉차게 나타나는 것이다.
안녕하세요 버건디 ㅋㅋㅋㅋ 우연히 왔는데 버건디 블로그였네요ㅋㅋㅋ 잘 보고 갑니다 ㅎㅎ