CSS 플렉스(정렬)

1차원 레이아웃

<Flex Container의 화면 출력(보여짐) 특성>
display
flex : 블록 요소와 같이 Flex Container 정의
inline-flex : 인라인 요소와 같이 Flex container 정의


<주 축을 설정>
flex-direction
row : 행 축 (좌 => 우)
row-reverse : 행 축 (우 => 좌)
column : 열 축 (위 => 아래)
column-reverse : (아래 => 위)

<Flex Items 묶음(물 바꿈)여부>
flex-wrap
nowrap : 묶음 (줄 바꿈) 없음
wrap : 여러 줄로 묶음
wrap-reverse : wrap의 반대 방향으로 묶음

<주 축의 정렬 방법(수평)>
justify-content
flex-start : Flex Items를 시작점으로 정렬
flex-end : Flex Items를 끝점으로 정렬
center : Flex Items를 가운데 정렬
space-between : 각 Flex Item 사이를 균등하게 정렬
space-around : 각 Flex Item의 외부 여백을 균등하게 정렬

<교차 축의 여러 줄 정렬 방법(수직)>
align-content
stretch : Flex Items를 시작점으로 정렬
flex-start : Flex Items를 시작점으로 정럴
flex-end : Flex Items를 끝점으로 정렬
center : Flex Items를 가운데 정렬
space-between : 각 Flex Item 사이를 균등하게 정렬
space-around : 각 Flex Item의 외부 여백을 균등하게 정렬

<교차 축의 한 줄 정렬 방법>
align-items
stretch : Flex Items를 교차 축으로 늘림
flex-start : Flex Items를 각 줄의 시작점으로 정렬
flex-end : Flex Items를 각 줄의 끝점으로 정렬
center : Flex Items를 각 줄의 가운데 정렬

 

 

 

---

<플렉스 (정렬)Items>

<Flex Item의 순서>
order
0 : 순서 없음
숫자 : 숫자가 작을 수록 먼저

<Flex Item의 증가 너비 비율>
flex-grow
0 : 증가 비율 없음
숫자 : 증가 비율

<Flex Item의 감소 너비 비율>
flex-shrink
1 : Flex Container 너비에 따라 감소 비율 적용
숫자 : 감소 비율

<Flex Item의 공간 배분 전 기본 너비>
flex-basis
auto : 요소의 Content 너비
단위 : px, em, rem 등 단위로 지정