20. CSS - Flex item 전용 속성

• order 
  • item이 main-axis 방향으로 배치되는 순서를 지정하는 속성

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면

 

 

• flex-grow(팽창)
  • item이 flex-container 내부에서 비어있는 공간을 매꿀 수 있도록 팽창하는 정도를 지정하는 속성

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면 - flex-grow 크기만큼 팽창

 

 

• flex-shrink (수축)
  • flex-container가 줄어들 때 내부 item의 수축하는 정도를 지정하는 속성
  • (flex-wrap : nowrap; 일때 만 적용)

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면

 

 

• flex-basis
  • main-axis 방향으로 item이 차지하는 크기를 지정하는 속성
  • 각종 크기 단위 사용 가능 (px, %, vh, em, rem 등)

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면

 

 

• align-self
  • 각 item별로 교차축 배치를 지정하는 속성

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면