HTML, CSS

flex-item 전용 속성

삑삑도요 2022. 10. 18. 17:39

1) order : flex-container 내부의 item이 main-axis방향으로 배치되는 순서를 지정하는 속성
예) order : 1
기본값 0, 정수만 가능함(양수, 음수 가능)

2) flex-grow : item이 flex-container 내부에서 비어있는 공간을 메꿀 수 있도록 팽창하는 정도를 지정하는 속성
예) flex-grow: 4;
* 기본값 : 0
* 여러 item에 지정한 경우, 각 item의 크기에 비례해서 팽창함

3) flex-shrink : flex-container가 줄어들 때 내부 item의 수축 정도를 지정하는 속성
예) flex-shrink: 0;
* 기본값 : 1
* 여러 item에 지정한 경우, 각 item의 크기에 비례해서 수축함
* flex-wrap: nowarp 인 경우에만 적용 가능함

4) flex-basis : main-axis 방향으로 item이 차지하는 크기를 지정하는 속성
* 가로, 세로 상관 없이 비율에 맞체 변화함
* 각종 크기 단위 사용 가능 (px, %, vh, em, rem 등)
예) flex-basis: 10%

5) flex : grow, shrink, basis를 한번에 설정
예) flex: 0 0 10%;

6) align-self : item별로 cross-axis 배치를 지정하는 속성
적용법은 align-item과 동일