justify-content : 가로선상
->다음의 값들을 인자로 받아 요소들을 가로선 상에서 정렬
flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
center: 요소들을 컨테이너의 가운데로 정렬합니다.
space-between: 요소들 사이에 동일한 간격을 둡니다.
space-around: 요소들 주위에 동일한 간격을 둡니다.
align-items : 세로선상
->다음의 값들을 인자로 받아 요소들을 세로선 상에서 정렬
flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
stretch: 요소들을 컨테이너에 맞도록 늘립니다.
flex-direction : 정렬 방향
->컨테이너 안에서 요소들이 정렬해야 할 방향을 지정
row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
column: 요소들을 위에서 아래로 정렬합니다.
column-reverse: 요소들을 아래에서 위로 정렬합니다.
align-self : 세로선상 - 요소지정
는 개별 요소에 적용할 수 있는 또 다른 속성입니다. 이 속성은 align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용됩니다.
order : 순서
flex 요소의 순서를 지정합니다.order의 기본 값은 0이며, 양수나 음수로 바꿀 수 있습니다.
<integer> (... -1, 0 (default), 1, ...)
예시
.yellow { order:3; }
.red { order : -4; }
설명 : 현재 위치 기준 yellow는 오른쪽으로 3칸, red는 왼쪽으로 4칸
flex-wrap : 줄 정렬
nowrap: 모든 요소들을 한 줄에 정렬합니다.
wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
flex-flow : 정렬 방향 + 줄 정렬
flex-direction과 flex-wrap이 자주 같이 사용되기 때문에, flex-flow가 이를 대신 해줄 수 있음.
->공백문자를 이용하여 두 속성의 값들을 인자로 받음
예)flex-flow: row wrap
align-content : 여러줄 간격
->여러 줄 사이의 간격을 지정
flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.
item와 content차이
item는 한 줄,content는 여러 줄(한번에)
