FE/CSS

[CSS] Flex

따봉치치 2023. 7. 19. 18:47
728x90

Flexbox

구성

  1. Flex Container : display를 flex로 설정하면 자동으로 부모 요소가됨
  2. Flex Items : 자식 요소들

 

Flex Container 속성

  • Flex-direction : row, column, row-reverse, column-reverse
  • Flex-wrap : 줄바꿈 속성 nowrap, wrap, wrap-reverse
  • Flex-flow : direction과 wrap 속성 동시에 사용할 수 있는 속성
  • Justify-content : 메인 축 기준 아이템 배치, 간격 속성 flex-start, flex-end, center, space-between, space-around, space-evenly
  • Allign-items : 교차 축 (한 줄)기준 아이템 배치, flex-start, flex-end, center, stretch, baseline (item의 text 기준)
  • Allign-content : wrap속성을 사용하여 아이템들이 여러 줄로 배치될 경우 사용
  • Align-self : 하나의 item에게만 개별 속성을 주고 싶을 때

 

Flex item 속성

  • Order : item들의 순서를 숫자로 지정해 줄 수 있음, default는 0
  • Flex-grow : item을 컨테이너 사이즈에 맞게 늘이는 기능
  • Flex-shrink : item이 축소되는 기능, container 보다 아이템들 크기가 더 클 때 사용함
  • Flex-basis : item들의 기본 사이즈를 지정하는 속성
  • Flex : grow, basis 값을 동시에 변경할 수 있는 속성
728x90