웹프로그래밍 - 4-2. flexbox 아이템에 적용하는 속성들

이전 글에서는 container에 적용하는 속성들에 대해 알아봤다.

2023.04.03 - [수업] - 웹프로그래밍 - 4-2 Flexbox란?

웹프로그래밍 - 4-2 Flexbox란?

 

아이템에 적용하는 속성들

 

1. flex-basis

- flex 아이템의 기본 크기 설정

- flex-direction이 row일 때는 너비, column일 때는 높이

- auto: 해당 아이템의 width값을 사용(width가 정해져있으면 그만큼, 아니라면 content가 차지하는만큼)

- content는 content의 크기만큼을 의미하므로 width를 지정하지 않는 것과 같음

- 반응형 웹을 고려할 때 %를 사용하는 것이 바람직

 

2.  flex-grow

- 유연하게 늘리기

- 0보다 큰 값이 세팅되면 해당 아이템이 유연한(flexible) 박스로 변하고 원래의 크기보다 커짐.

 

3. flex-shrink

- 유연하게 줄이기

- 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다.

- Container에 "flex-wrap: wrap" 속성을 부여한 경우 적용되지 않는다.

- 숫자값, 0보다 큰 값이 세팅 되면 해당 아이템이 flexible 박스로 변하고 flex-basis보다 작아진다.

- 기본값이 1이므로 따로 세팅하지 않았어도 아이템이 flex-basis보다 작아질 수 있다.

- flex-shrink: 1; 속성을 부여하면, 아이템들 너비가 똑같이 줄어든다.

 

자동으로 아이템 너비가 축소되지 않도록 하려면 "flex-shrink: 0"을 선언해야 한다.

그래야 최소한의 크기 보장 가능