수업
웹프로그래밍 - 4-2. flexbox 아이템에 적용하는 속성들
eunslog
2023. 4. 3. 23:53
이전 글에서는 container에 적용하는 속성들에 대해 알아봤다.
2023.04.03 - [수업] - 웹프로그래밍 - 4-2 Flexbox란?
웹프로그래밍 - 4-2 Flexbox란?
3/23 수업 container에 적용하는 속성들 display: flex; - 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width만큼 차지한다. - item을 inline으로 만듦. - height은 container의 높이만큼. display: inline
codingtoday.tistory.com
아이템에 적용하는 속성들
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"을 선언해야 한다.
그래야 최소한의 크기 보장 가능