item에게 주는 속성 flex basis
flex-basis는 item의 크기를 설정한다. 초기값은 auto이다. 또한, flex-direction의 방향으로 크기를 설정한다. flex-direction: column인 경우 높이가 변하고 row면 넓이가 변하게 된다. .iten:nth-child(2)는 두번째 아이템을 선택한 것을 의미한다.
item에게 주는 속성 flex-grow
flex-grow 초기값은 0이다. 1을 주게 되면 각 item들이 여백을 공평하게 나눠가진다.
.
item 2의 공간을 더 커지게 하고 싶다면 item 2만 선택하여 flex-grow 값을 더 크게 주면 된다. 코드를 보며 확인해보자.
item에게 주는 속성 flex-shrink
flex-grow와 반대라고 생각하면 된다. Flex Container에 공간이 부족해질 때 Flex Item의 axis 방향 크기가 얼마나 줄어들 수 있는지 지정하는 값이다. 초기값은 1이고, 음수로의 설정은 불가능하다.flex-basis의 값이 지정되있어야 한다.
아이템 1에게 flex-shrink:0;을 주면 줄어들지 않고, 2번만 줄어들게 된다. 위의 화면을 통해 확인해보자.
아이템 1에게 flex-shrink:1;을 주고 아이템 2에게 flex-shrink:2;를 주면 어떻게 될까?
홈페이지 창의 넓이를 줄어들게 하면 아이템 1은 1/3 만큼 줄어들고 아이템 2는 2/3만큼 줄어드는 것을 확인 할 수 있다. (아이템2가 더 빨리 줄어드는 모습을 볼 수 있다)
참고:https://choar816.tistory.com/119
참고:생활코딩
새로 알게된 점
오늘 멋쟁이 사자처럼 수업을 듣고 flex 속성에 대해 더 자세하게 알 수 있었다.
flex-basis, fiex-grow, flex-shrink는 아이템 속성에게 적용할 수 있다는 것을 기억해야겠다. flex는 알수록 정말 유연한 아이인것 같다.
