flex-shrink, flex-wrap, justify-content

flex-shrink

- flex-item의 요소값을 설정하는 속성

- 사용하는 경우 : 부모 컨테이너 크기보다 클 때 (=공간 부족)

- flex-shrink : 0 => 부모 컨테이너의 크기가 줄어들어도 해당 요소는 줄어들지 않는다.

- 숫자가 커질수록 더 줄어든다.

 

flex-wrap

- flex-item의 요소들을 정렬하는 속성

- 사용하는 경우: 줄바꿈을 하고 싶을 때

- no wrap : default

- wrap : 아래 방향으로 여러 줄로 나눈다.

- wrap-reverse : 위 방향으로 여러 줄로 나눈다.

 

justify-content

- 요소들 사이와 주 공간을 나누는 속성

- space-between : 요소들 간 간격을 균일하게 만든다.

- space-around : 요소들의 둘레 간 간격을 균일하게 만든다.

- space-evenly : 양 끝 + 요소들 간 간격을 균일하게 만든다.