[CSS]Flex Containers 속성 flex-wrap, justify-content, align-content, align-items

flex-wrap

 

값	의미
nowrap	모든 items를 한 줄로 표시
wrap	items를 여러 줄로 묶음
wrap-reverse	items를 wrap 역방향으로 묶음

 

 

 

justify-content

 

값	의미
flex-start	시작점으로 정렬(default)
flex-end	끝점으로 정렬
center	가운데 정렬
space-between	시작 아이템은 시작점에, 마지막 아이템은 끝점에 정렬 나머지 아이템은 고르게 정렬
space-around	아이템을 균등한 여백으로 정렬

 

 

 

align-content

 

교차축 정렬 방법

items가 2줄 이상이며 여백이 있을 경우 사용

속성	의미
stretch	교차축을 채우기 위해 늘림
flex-start	각 줄의 시작점으로 정렬
flex-end	각 줄의 끝점으로 정렬
center	가운데로 정렬
space-between	시작 아이템은 시작점에, 마지막 아이템은 끝점에 정렬 나머지 아이템은 고르게 정렬
space-around	아이템을 균등한 여백으로 정렬

 

 

 

 

align-items

items가 한 줄일 경우 많이 사용하며 
flex-wrap을 통해 2줄 이상일 경우 align-content 속성이 우선
align-items를 사용하려면 align-content속성을 기본값 stretch로 설정

 

속성	의미
stretch	교차축을 채우기 위해 늘림
flex-start	각 줄의 시작점으로 정렬
flex-end	각 줄의 끝점으로 정렬
center	가운데로 정렬
baseline	문자열 기준 정렬

 

 

 

 

 

 

https://jperasmus.me/posts/the-80-20-of-flexbox