The Pursuit of Happyness

반응형

CSS 플렉서블 박스에 대한 간단 사용법 입니다.


기본 속성

display : flex / inline-flex

  • flex: 박스를 블록 수준의 플렉서블 박스로 작동하게 함
  • inline-flex: 박스를 인라인 수준의 플렉서블 박스로 작동하게 함


아이템의 배치 방향 설정하기

flex-direction : row / row-reverse / column / column-reverse

  • row : 기본 설정 값. 박스를 왼쪽에서 오른쪽으로 배치. 주축은 가로 / 교차축은 세로
  • row-reverse : 박스를 오른쪽에서 왼쪽으로 배치
  • column : 박스를 위에서 아래로 배치
  • column-reverse : 박스를 아래에서 위쪽으로 배치


아이템을 여러 줄로 배치하기

flex-wrap : nowarp / wrap / wrap-reverse

  • nowrap : 기본 설정 값. 박스를 한줄로 배치
  • warp : 박스를 여러 줄로 배치
  • wrap-reverse : 박스를 여러 줄로 배치하는데 순서는 wrap 의 반대 (주축이 가로인 경우 아래에서 위로, 주축이 세로인 경우 오른쪽에서 왼쪽으로 배치)


배치 방향과 여러 줄 배치 설정을 같이 하기

flex-flow : [flex-direction] [flex-wrap]


주축 방향의 아이템 배치 / 정렬

justify-content : flex-start / flex-end / center / space-between / space-around

  • flex-start : 기본 설정 값. 박스틀을 주축의 시작점부터 쌓아서 배치
  • flex-end : 박스들을 쌓아서 주축의 끝점으로 배치
  • center : 박스들을 쌓아서 주축의 중앙에 배치
  • space-between : 박스들 사이에 공백을 넣어서 배치
  • space-around : 박스들 사이와 시작, 끝에 공백을 넣고 배치


교차축 방향의 아이템 배치 / 정렬

align-items : stretch / flex-start / flex-end / center / baseline

  • stretch : 기본 설정 값. 박스를 교차축 방향으로 늘려서 배치
  • flex-start : 박스를 교차축 시작점 기준으로 배치
  • flex-end : 박스를 교차축 끝점 기준으로 배치
  • center : 박스를 교차축의 중앙에 배치
  • baseline : 박스들을 교차축의 시작점에 배치되는 자식 박스의 글자 베이스라인에 맞춰서 배치

교차축 방향으로 아이템들을 개별적으로 배치하기
align-self : auto / stretch / flex-start / flex-end / center / baseline
  • auto : 부모의 align-items 속성을 상속
(나머지는 align-items 설명을 참조)


여러 줄의 아이템을 교차축 방향으로 배치 / 정렬 하기
align-content : stretch / flex-start / flex-end / center / space-between / space-around
(justify-content, align-items 의 설명을 참조)


플렉스 아이템의 배치 순서 지정하기
order : 정수 (기본값 0)

큰 숫자가 뒤쪽으로 배치되며, 숫자가 같은 경우 먼저 작성된 태그가 앞에 배치
음수는 0으로 간주됨


플렉스 아이템의 크기 비율 지정
flex : [flex-grow] [flex-shrink] [flex-basis]
  • flex-grow : 여백이 있는 경우 아이템의 크기를 비율대로 늘려주는 속성
  • flex-shrink : 아이템의 크기가 지정한 박스 크기 보다 큰 경우 줄여주는 속성
  • flex-basis : 아이템의 기본 크기를 설정하기 위한 속성






반응형