부모속성에다가 쓸수있는 것만

-display:flex가 있었어야함.!!!

justify-content ( 중심축 이동)

• *flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
• *flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
• *center: 요소들을 컨테이너의 가운데로 정렬합니다.
• *space-between: 요소들 사이에 동일한 간격을 둡니다.
• space-around: 요소들 주위에 동일한 간격을 둡니다.

align-items (반대축 이동)

• *flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
• *flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
• *center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
• baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
• stretch: 요소들을 컨테이너에 맞도록 늘립니다.

flex-direction (row,column방향설정!)

• *row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
• *column: 요소들을 위에서 아래로 정렬합니다.
• column-reverse: 요소들을 아래에서 위로 정렬합니다.

order 태그의 순서를 바꿔줄수가있다.!

align-self 개개인 상하축! 이동!

align-self: flex-end;

flex-wrap !!!

flex는 무조건 한줄에 나와줄려고합니다

자식들이 위드가 넘치더라도

• nowrap: 모든 요소들을 한 줄에 정렬합니다.
• *wrap: 요소들을 여러 줄에 걸쳐 정렬합니다. (떨군다!!)
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

align-content.

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
• center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
• space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
• space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
• stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

자식속성에다가 쓸수있는 것만

shrink 줄어들다

flex-grow: ; → 자라나다~ / 증가될때의 비율
flex-shrink: ; → 줄어들다 / 줄어들때의 비율
flex-basis: ; → 중심축기준 위드 높이

flex : [grow][shrink] [basis]