[CSS] FLEXIBLE BOX LAYOUT

 

 

플렉서블 박스 레이아웃 : 그리드 레이아웃을 기본으로 해 플렉스 박스를 원하는 위치에 배치

 

display : 플렉스 컨테이너 지정

- flex 속성 : 플렉스 박스를 박스 레벨 요소로 정의

- inline-flex 속성 : 플렉스 박스를 인라인 레벨 요소로 정의

 

flex-direction : 플렉스 방향 지정

속성 값	설명
row	주축을 가로로 교차축을 세로로 지정 플렉스 항목은 주축 시작점에서 끝점으로(왼쪽에서 오른쪽으로) 배치
row-inverse	주축을 가로로 교차축을 세로로 지정 플렉스 항목은 주축 끝점에서 시작점으로(오른쪽에서 왼쪽으로) 배치
column	주축을 세로로 교차축을 가로로 지정 플렉스 항목은 주축 시작점에서 끝점으로(위쪽에서 아래쪽으로) 배치
column-inverse	주축을 세로로 교차축을 가로로 지정 플렉스 항목은 주축 끝점에서 시작점으로(아래쪽에서 위쪽) 배치

 

flex-wrap : 플렉스 항목을 한 줄 또는 여러 줄로 배치

속성 값	설명
no-wrap	플렉스 항목들을 한 줄에 표시 (기본 값)
wrap	플렉스 항목을 여려 줄에 표시
wrap-reverse	플렉스 항목을 여러 줄에 표시하되, 기존 방향과 반대로 배치

 

flex-flow : 플렉스 방향과 여러 줄의 배치를 한번에 지정

 

order : 플렉스 항목의 배치 순서 바꿈

 

flex : 플렉스 항목 크기 조절

flex : [<flex-grow> | <flow-shrink> | <flex-basis>] | auto | initial

속성 값	설명
<flex-grow>	플렉스 항목의 넓이를 얼마나 늘일지 숫자로 지정
<flow-shrink>	플렉스 항목의 넓이를 얼마나 줄일지 숫자로 지정
<flex-basis>	플렉스 항목의 기본 크기 지정
initial	항목의 width / height 값에 의해 크기가 결정되는데,  플렉스 컨테이너의 공간이 부고할 경우에는 최소크기까지 줄임
auto	항목의 width / height 값에 의해 크기가 결정되지만,  플렉스 컨테이너의 공간에 따라 늘어나거나 줄임

 

justify-content : 주축 기준의 배치 방법 지정

속성 값	설명
flex-start	주축의 시작점을 기준으로 배치
flex-end	주축의 끝점을 기준으로 배치
center	주축의 중앙을 기준으로 배치
space-between	첫 번째 플랙스 항목과 마지막 플랙스 항목은 시작점과 끝점에 배치 한 후,  중앙 항목들은 같은 간격으로 배치
space-around	모든 플렉스 항목들은 같은 간격으로 배치

 

align-items / align-self : 교차축 기준의 배치 방법 지정

속성 값	설명
stretch	플렉스 항목을 확장해 교차축을 꽉 채움 (기본 값)
flex-start	교차축의 시작점을 기준으로 배치
flex-end	교차축의 끝넘을 기준으로 배치
center	교차축의 중앙을 기준으로 배치
baseline	시작점과 글자 기준선이 가장 먼 플렉스 항목을 시작점에 배치하고,  그 글자의 기준선과 다른 항목의 기준선을 맞춰 배치

 

align-content : 여러 줄 일때의 배치 방법 지정