3. Flex 정렬¶
3.1. 축(diection)¶
row(행, x축)는 가로 방향으로 아이템을 배치하며 col(열, y축)은 세로방향으로 아이템을 배치한다.
3.2. justify-content¶
Flex가 설정되어 있는 상태에서 Flex Direction(flex-direction)으로 설정되는 방향 축에 따라 요소들을 정렬하는 방법이다. 그 축의 시작(justify-content: flex-start, 기본값 ), 중앙 정렬(justify-content: center), 그 축의 끝(justify-content: flex-end) , 사이사이에만 공간을 넣는 나눔 정렬(justify-content: space-between), 사이사이와 시작과 끝에 공간을 넣는 나눔 정렬(justify-content: space-around) 등이 있다.
3.3. align-items¶
Flex가 설정되어 있는 상태에서 Flex Direction(flex-direction)으로 설정되는 방향 축에 수직에 따라 요소들을 정렬하는 방법이다. 그 축의 시작(align-items: flex-start), 중앙 정렬(align-items: center), 그 축의 끝(align-items: flex-end) , 각 요소의 글자의 baseline 기준으로 정렬 (align-items: baseline), 각 요소를 flex-box의 끝까지 늘리는(align-items: stretch, 기본값 ) 등이 있다.