본문으로 건너뛰기

CSS Flex

Flex Container​

  • display : Flex Container를 정의
    • flex : Block 특성의 Flex Container를 정의
    • inline-flex : Inline 특성의 Flex Container를 정의
  • flex-flow: flex-direction flex-wrap;
  • flex-direction : Flex Items의 주 축(main-axis)을 설정
    • row : Itmes를 수평축(왼쪽에서 오른쪽으로)으로 표시 (기본값)
    • row-reverse : Items를 row의 반대 축으로 표시
    • column : Items를 수직축(위에서 아래로)으로 표시
    • column-reverse : Items를 column의 반대 축으로 표시
  • flex-wrap : Flex Items의 여러 줄 묶음(줄 바꿈) 설정
    • nowrap : 모든 Itmes를 여러 줄로 묶지 않음(한 줄에 표시) (기본값)
    • wrap : Items를 여러 줄로 묶음
    • wrap-reverse : Items를 wrap의 역 방향으로 여러 줄로 묶음
  • justify-content : 주 축(main-axis)의 정렬 방법을 설정
    • flex-start : Items를 시작점(flex-start)으로 정렬 (기본값)
    • flex-end : Items를 끝점(flex-end)으로 정렬
    • center : Items를 가운데 정렬
    • space-between : 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
    • space-around : Items를 균등한 여백을 포함하여 정렬
  • align-content : 교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상)
    • stretch : Container의 교차 축을 채우기 위해 Items를 늘림 (기본값)
    • flex-start : Items를 시작점(flex-start)으로 정렬
    • flex-end : Items를 끝점(flex-end)으로 정렬
    • center : Items를 가운데 정렬
    • space-between : 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
    • space-around : Items를 균등한 여백을 포함하여 정렬
  • align-items : 교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄)
    • stretch : Container의 교차 축을 채우기 위해 Items를 늘림 (기본값)
    • flex-start : Items를 각 줄의 시작점(flex-start)으로 정렬
    • flex-end : Items를 각 줄의 끝점(flex-end)으로 정렬
    • center : Items를 가운데 정렬
    • baseline : Items를 문자 기준선에 정렬

Flex Items​

  • order Flex Item의 순서를 설정
    • 숫자 : Item의 순서를 설정 (기본값:0)
  • flex: flex-grow, flex-shrink, flex-basis;
  • flex-grow Flex Item의 증가 너비 비율을 설정
    • 숫자 : Item의 증가 너비 비율을 설정 (기본값:0)
  • flex-shrink Flex Item의 감소 너비 비율을 설정
    • 숫자 : Item의 감소 너비 비율을 설정 (기본값:1)
  • flex-basis Flex Item의 (공간 배분 전) 기본 너비 설정
    • auto : 가변 Item과 같은 너비 (기본값)
    • 단위 : px, em, cm 등 단위로 지정
  • align-self 교차 축(cross-axis)에서 Item의 정렬 방법을 설정
    • auto : Container의 align-items 속성을 상속받음 (기본값)
    • stretch : Container의 교차 축을 채우기 위해 Item을 늘림
    • flex-start : Item을 각 줄의 시작점(flex-start)으로 정렬
    • flex-end : Item을 각 줄의 끝점(flex-end)으로 정렬
    • center : Item을 가운데 정렬
    • baseline : Item을 문자 기준선에 정렬

https://css-tricks.com/snippets/css/a-guide-to-flexbox/