Flex, Justify Content

flex-direction
: row; > 왼쪽에서 오른쪽으로
: row-reverse; > 오른쪽에서 왼쪽으로
: column > 위에서 아래로
: column-reverse; > 아래에서 위로

 

flex-wrap: nowrap; > 화면이 줄어들어도 줄바꿈 x
flex-wrap: wrap; > 아이템이 한 줄에 꽉 차게 되면 자동적으로 다음 라인으로 넘어감

flex-wrap: wrap-reverse; > 공간이 없을 때 위로 올림

flex-flow: column nowrap > flex-direction을 한 번에 작성할 수 있음

 

justyfy-content

: flex-start; (아이템을 어떻게 배치할 건지를 결정해 줌) > 처음부터 왼쪽에서 오른쪽으로

: flex-end; 오른쪽 축으로 아이템들 배치 (열은 그대로 유지한채로 밑으로 내려줌) cf) column-reverse랑 다른점

: center; > 가운데로

: space-around; > 둘레를 넣어 줌

 - 내부 아이템에 있는 공간의 개수 만큼 나누고 양쪽에 여백을 주고 space between

: space-evenly; > 똑같은 간격을 넣어줌:

: space-between; 아이템을 딱 화면에 맞게 배치하고 중간에만 아이템을 넣어줌 (양쪽 끝에 배치)

 

 

justify-content는 중심(메인)축에서 아이템을 어떻게 배치하는지 결정하는 것
align-items: 반대(교차)축에서 아이템을 배치하는 속성값 (상자들을 수직쪽에서 배치하는 것)