［CSS］FLEX... 대체 뭐냐고

그냥 ... css 쓰다가 플랙스 종류가 하도 많아 자꾸 헷갈려서 정리함. 내가 보기 편하게 쉽게 정리한 것,..ㅎㅎ

display: Flex

컨테이너를 정의하기 위한 속성.

• flex: Flex 컨테이너를 정의
• inline-flex: 인라인 Flex 컨테이너를 정의

flex-direction:

아이템의 배치 방향을 지정하는 속성.

• row: 아이템을 수평으로 배치. (가로)
• row-reverse: 아이템을 반대로 수평으로 배치.
• column: 아이템을 수직으로 배치. (세로)
• column-reverse: 아이템을 반대로 수직으로 배치.

flex-wrap:

아이템의 줄 바꿈 여부를 지정하는 속성

• nowrap: 아이템을 한 줄에 배치하며 줄 바꿈X.
• wrap: 아이템을 여러 줄에 걸쳐 배치하고 필요한 경우 줄 바꿈함.
• wrap-reverse: 아이템을 여러 줄에 걸쳐 반대로 배치하고 필요한 경우 줄 바꿈함.

justify-content:

Flex 아이템을 가로 축(수평 방향)에서 정렬하는 속성.

• flex-start: 아이템을 컨테이너의 시작 부분으로 정렬.
• flex-end: 아이템을 컨테이너의 끝 부분으로 정렬.
• center: 아이템을 가로 축의 중앙으로 정렬. (국밥임)
• space-between: 아이템들 사이에 동일한 간격을 유지하며 정렬.
• space-around: 아이템들 주위에 동일한 간격을 유지하며 정렬.
• space-evenly: 아이템들 사이와 주위에 동일한 간격을 유지하며 정렬.

align-items: 

아이템을 세로 축(수직 방향)에서 정렬하는 속성.

• stretch: 아이템을 컨테이너의 높이에 맞게 늘립니다.
• flex-start: 아이템을 컨테이너의 시작 부분으로 정렬.
• flex-end: 아이템을 컨테이너의 끝 부분으로 정렬.
• center: 아이템을 세로 축의 중앙으로 정렬. (국밥.)
• baseline: 아이템들의 기준선을 정렬.

align-content: 

여러 줄의 Flex 아이템을 수직 축(수직 방향)에서 정렬하는 속성.
flex-wrap 속성이 wrap이나 wrap-reverse인 경우에만 적용됨.

• stretch: 아이템을 컨테이너의 높이에 맞게 늘림.
• flex-start: 아이템을 컨테이너의 시작 부분으로 정렬.
• flex-end: 아이템을 컨테이너의 끝 부분으로 정렬.
• center: 아이템을 세로 축의 중앙으로 정렬.
• space-between: 아이템들 사이에 동일한 간격을 유지하며 정렬.
• space-around: 아이템들 주위에 동일한 간격을 유지하며 정렬.