[CSS] CSS FLEX

css flex

justify-content 가로 방향 정렬

• flex-start 가로 방향 왼쪽 정렬
• flex-end 가로 방향 오른쪽 정렬
• center 가로 방향 가운데 정렬
• space-between 가로 방향 양끝 기준으로 아이템에게 균일한 간격을 주는 것 (양끝기준 같음)
• space-around 가로 방향 아이템들의 각각의 간격을 완전 동일하게 준다.(A와 B사이 거리 같음)
• space-evenly 수직으로 아이템들의 간격을 완전 동일하게 준다. (사이사이같음)

align-items 수직 방향으로 정렬, 즉 위 아래 정렬

• flex-start 위로 정렬
• flex-end 아래로 정렬
• center 중간 정렬
• baseline 텍스트 베이스라인 기준으로 정렬
• stretch 수직축 방향으로 끝까지 늘어남

flex-direction 아이템의 방향을 가로, 세로 정함 + 순서 정렬

• row 가로 방향으로 정렬
• row-reverse 역순으로 가로 방향 정렬
• column 세로 방향으로 정렬
• column-reverse 역순으로 세로 방향 정렬

order 위치를 지정할 수 있는 정렬

• order : 1; -> 인덱스가 -1부터 시작한다고 생각해서 -1 0 1일 때 a가 1의 자리로 위치를 이동하는 정렬

align-self 개별 요소에 작용하는 align-itmes

• flex-start 위로 정렬
• flex-end 아래로 정렬
• center 중앙 정렬
• baseline 글자 텍스트 베이스라인 기준으로 정렬
• stretch 수직축 방향으로 끝가지 늘어남

flex-wrap

• nowrap 모든 요소를 한 줄에 정렬한다.
• wrap 요소들을 여러 줄에 걸쳐 정렬한다
• wrap-reverse 요소들을 여러 줄에 걸쳐 반대로 정렬한다.

flex-flow flex-direction과 flew-wrap를 합친 것

• flex-flow: column wrap 세로 정렬 + 여러 줄에 걸쳐 정렬한다.

align-content wrap상태에서 2줄 이상 되었을 때 수직축 방향 정렬

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