플렉스(CSS Flex)

// display: flex;
컨테이너에 flex를 적용하는 것이 시작.
아이템들이 배치된 방향의 축을 Main Axis
Main Axis와 수직인 축을 Cross Axis 이라 한다.
Main Axis = 오뎅꼬치

// -------------------------------------------------------------------------------
// start of 배치(부모요소)
// -------------------------------------------------------------------------------

// flex-direction: 접두사(row-, column-)별 정렬 방향 지정
// 배치방향 설정: 아이템들이 배치되는 축의 방향을 결정
row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
column: 요소들을 위에서 아래로 정렬합니다.
column-reverse: 요소들을 아래에서 위로 정렬합니다.

// flex-wrap:  flex-direction과 자주 같이 사용됨.
// 줄넘김 처리 설정
// 컨테이너가 더이상 한줄에 담을 여유공간이 없을때 아이템 줄바꿈을 어떻게 할 것인가?
nowrap: 모든 요소들을 한 줄에 정렬합니다. 넘치면 삐져나감.
wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

// flex-flow
// flex-direction & flex-wrap 을 한꺼번에 지정할 수 있는 단축 속성
// flex-direction, flex-wrap 순으로 써주면 됨.
flex-flow: row wrap;

// -------------------------------------------------------------------------------
// end of 배치(부모요소)
// -------------------------------------------------------------------------------

// -------------------------------------------------------------------------------
// start of 정렬(부모요소)
// -------------------------------------------------------------------------------

// justify-content: 가로 선상의 정렬 
// 메인축방향 정렬
flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
center: 요소들을 컨테이너의 가운데로 정렬합니다.
space-between: 요소들 사이에 동일한 간격을 둡니다.(양 끝 요소들은 벽에 붙음)
space-around: 요소들 주위에 동일한 간격을 둡니다.
space-evenly: 요소들 둘레 + 양 끝에 균일한 간격.(* IE, Edge 미지원!!!)

// align-items: 세로 선상의 정렬 (전체) cf. align-self: 개별요소에 적용
// 수직축 방향 절렬
flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.(텍스트 베이스라인 기준)
stretch: 요소들을 컨테이너에 맞도록 늘립니다.

// align-content: 여러 줄 사이의 간격을 지정 cf. align-items: 컨테이너 안에서 어떻게 모든 요소들이 정렬하는 지정.
// 여러행 정렬
// flex-wrap: wrap이 설정된 상태에서 아이템들의 행이 2줄이상 되었을 때의 수직축 방향 정렬 결정하는 속성
flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
space-evenly: 요소들 둘레 + 양 끝에 균일한 간격.(* IE, Edge 미지원!!!)
stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

// -------------------------------------------------------------------------------
// end of 정렬(부모요소)
// -------------------------------------------------------------------------------

// -------------------------------------------------------------------------------
// start of 플렉스 아이템에 적용하는 속성들(자식요소)
// -------------------------------------------------------------------------------

// flex-basis
// flex 아이템의 기본크기 설정(auto, %, px, rem, content)

// flex-grow (<-> flex-shrink)
// 아이템이 flex-basis의 값보다 커질수있는기 결정하는 속성
// flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다는 의미.

// flex : flex-basis, flex-grow, flex-shrink 세가지 속성을 한번에 쓸수있는 축약형 속성

// order : 기본 값은 0이며, 양수나 음수로 바꿀 수 있습니다.
// 배치순서