✅ wrap & nowrap
flexbox는 item들이 모두 같은 줄에 있도록 유지함. 상단의 예를 보면 하나의 박스는 200px의 width를 가지고 있는데 6개를 넣던 7개를 넣던 한줄에 있도록 유지해야하기 때문에 width의 값에 관계없이 크기를 줄임.
기본적으로 flexbox의 flex-wrap값은 nowrap인데, father요소에 flex-wrap: nowrap;을 줘도 아무 변화가 없다.
하지만 여기서 flex-wrap: wrap; 속성을 부여하면, flexbox에게 child의 크기를 유지하라고 명령하는 것과 같기 때문에 child들의 크기를 유지하기 위해 한 줄에 있도록 유지하는 것을 깨게 된다.
✅ flex-grow, flex-shrink
flex-grow와 flex-shrink 두 속성 모두 자식요소에 부여할 수 있는 속성이다.
✅ flex-shirnk
flex-wrap: nowrap; 일 때, 자식요소들은 할당된 크기에 상관없이 한 줄로 정렬되기 때문에 화면을 줄이면 자식요소들의 크기도 줄어들게 되는데,
flex-shrink 속성을 사용하여 어느 자식요소의 크기를 더 줄일것인지 속성을 부여할 수 있다.
flex-shrink 속성의 기본값은 1이다. 속성을 주지 않으면 모두가 1이기 때문에 동일한 크기로 줄어들지만, 2번째 자식요소에 flex-shrink: 2;를 부여하면, 다른 자식요소보다 2번째 자식요소가 2배 더 많이 줄어들게 만들 수 있다.
✅ flex-grow
flex-grow는 shrink와 반대로 어느 자식요소의 크기를 더 키울것인지 부여할 수 있다.
flex-grow 속성의 기본값은 0이다. 2번째 자식요소에 flex-grow: 1; 을 주면 남은 공간을 모두 2번째 자식요소가 차지하게 된다.
