flex-wrap : Flex Items 묶음(줄 바꿈) 여부
nowrap(기본값) : 묶음(줄 바꿈) 없음
wrap : 여러 줄로 묶음
wrap-reverse : wrap의 반대 방향으로 묶음
*대부분의 경우에는 flex를 사용하여 수평 정렬을 한다.
justift-content : 주 축의 정렬 방법
flex-start(기본값) : Flex Items를 시작점으로 정렬
flex-end : Flex Items를 끝점으로 정렬
centet : Flex Items를 가운데 정렬
space-between : 각 Flex Items 사이를 균등하게 정렬
space-around : 각 Flex Items의 외부 여백을 균등하게 정렬
display: flex;
justify-content: flex-end;
-> 끝 점인 오른쪽으로 우측 정렬
display: flex;
justify-content: center;
-> 중앙으로 정렬
align-content : 교차 축의 여러 줄 정렬 방법
stretch(기본값) : Flex Items를 시작점으로 정렬
flex-start : Flex Items를 시작점으로 정렬
flex-end : Flex Items를 끝점으로 정렬
center : Flex Items를 가운데 정렬
space-between : 각 Flex Items 사이를 균등하게 정렬
space-around : 각 Flex Items의 외부 여백을 균등하게 정렬
display: flex;
flex-wrap: wrap;
align-content: flex-start;
-> 시작점(위쪽)에 정렬
display: flex;
flex-wrap: wrap;
align-content: flex-center;
-> 가운데 정렬
display: flex;
flex-wrap: wrap;
align-content: flex-end;
-> 끝점(아래쪽)에 정렬
align-content라는 속성은 아이템들이 한줄이 아닌 두줄 이상이어야 하며 두줄 이상이려면 flex-wrap으로 설정되어 있어야 하며 정렬이 가능한 여백이 있어야 정상적으로 동작함
slign-items : 교차 축의 한 줄 정렬 방법
stretch(기본값) : Flex Items를 교차 축으로 늘림
flex-start : Flex Items를 각 줄의 시작점으로 정렬
flex-end : Flex Items를 각 줄의 끝점으로 정렬
center : Flex Items를 각 줄의 가운데 정렬
baseline : Flex Items를 각 줄의 문자 기준선에 정렬
display: flex;
align-items: flex-start;
-> 수직 위쪽
display: flex;
align-items: flex-center;
-> 수직 가운데
display: flex;
align-items: flex-end;
-> 수직 아래쪽
*아이템이 한줄에 다 표현되고 있는 상태라면 align-items가 효율적이고
여러 줄에 걸쳐 표현되고 있는 상태라면 align-content가 더 효율적이다.
*아이템이 한줄일 때 content를 사용하면 동작하지 않는다.