※ 설명 - inline-block 또는 float로 마크업을 했을때의 불편함을 개선하기 위해 나온 속성이다. - 1차원적으로 수평, 수직 영역 중 하나의 방향으로 정렬이 필요할때 사용한다. - 유동적인 레이아웃 변화를 구성하기 적합하다. - 부모요소인 Flex Container와 자식요소인 Flex Item으로 구성되어있다.
※ 기본 사용법
속성
속성 설명
설정값
설정값 설명
display
Flexbox 적용
flex
Flexbox 적용
flex-direction
정렬 방향 지정
row (기본값)
Item을 가로로 정렬
row-reverse
Item을 가로 역순으로 정렬
column
Item을 세로로 정렬
column-reverse
Item을 세로 역순으로 정렬
align-items
Cross axis 정렬
stretch (기본값)
Item의 높이를 늘려서 컨테이너의 전체 높이에 맞추는 역할
center
Cross axis 기준 가운데 정렬
start
Cross axis 기준 시작 정렬
end
Cross axis 기준 끝에 정렬
justify-content
Main axis 정렬
start (기본값)
Main axis 기준 시작 정렬
center
Main axis 기준 가운데 정렬
space-between
Main axis 기준 일정한 간격으로 정렬 (끝에 여백 없음)
space-around
Main axis 기준 일정한 간격으로 정렬 (끝에 여백 절반)
space-evenly
Main axis 기준 일정한 간격으로 정렬 (끝에 여백 동일)
flex-wrap
Item들의 넓이가 Container를 벗어날 경우 다음줄에 이어서 정렬
nowrap (기본값)
Item이 Container를 벗어나더라도 그대로 한줄로 배치
wrap
Item이 Container를 벗어날 경우 다음줄에 배치
wrap-reverse
Item이 Container를 벗어날 경우 다음줄에 배치 (역순)
flex-flow
flex-direction, flex-wrap의 단축 속성
row wrap 등
동시에 두가지의 값 선언 가능
align-content
Cross axis 정렬 (여러줄일 경우)
start (기본값)
Cross axis 기준 시작 정렬
center
Cross axis 기준 가운데 정렬
space-between
Cross axis 기준 일정한 간격으로 정렬 (끝에 여백 없음)
space-around
Cross axis 기준 일정한 간격으로 정렬 (끝에 여백 절반)
order
특정 Item의 배치 위치 지정
정수값
특정 Item의 배치 위치 지정
flex
flex-grow, flex-shrink, flex-basis의 단축 속성
1 1 auto 등
flex-grow : Item이 Container 내에서 얼마나 늘어날지를 결정하는 비율
flex-shrink : Item이 Container 내에서 얼마나 줄어들지를 결정하는 비율
