1. Flex : display

• 수평 구조를 만드는 속성중 <table>, float, inline-block 등으로도 쓰이지만,
  
  보다 더쉽고 편리한, 그리고 반응형 페이지의 자동적으로 유리한 Flex(Flexible Box)라는 명확한 개념(속성들)으로
  레이아웃을 쉽게 구성할 수 있습니다.
  
  [ 1 - 콘테이너 ]
• 1. 시작 : 콘테이터의 디스플레이 플렉스 선언
  display : flex; > Block 요소와 같은 성향(수직 쌓임)을 가지며,
  //  ( display : inline-flex; ) > Inline(Inline Block) 요소와 같은 성향(수평 쌓임)을 가집니다.
  
  
• 2. Item 정렬방향 배치 flex-direction
  
  row (default) : 요소들을 텍스트의 방향과 동일하게 정렬한다.
  row-reverse : 요소들을 텍스트의 반대 방향으로 정렬한다.
  column : 요소들을 위에서 아래로 정렬한다.
  column-reverse : 요소들을 아래에서 위로 정렬한다.
  
• 3. flex-wrap : 요소들을 한 줄 또는 여러 줄에 걸쳐 정렬한다.
  - 한줄 : nowrap: 모든 요소들을 한 줄에 정렬한다.
  - 두줄이상 : wrap: 요소들을 여러 줄에 걸쳐 정렬한다.  < - > wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬
• 4. flex-flow :  flex-direction + flex-wrap 혼용 ( 방향 + 줄 )
  
  
• 5. Item 주축:가로선상 정렬기준 배치 justify-content
  

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

• 6. Item  교차축 정렬기준 배치 align-content
  : 세로선 상에 여분의 공간이 있는 경우, 여러 줄들 사이의(2줄) 간격을 지정한다.
  단, 한 줄만 있는 경우에는 적용되지 않는다.
  
  

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

• 7. Item 세로선상 기준 배치 align-items
  - 주의
  flex-wrap을 통해 여러 줄(2줄 이상)일 경우에는 align-content 속성이 우선합니다.
  따라서 align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 합니다.

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

 

 

[ 2 - 아이템 ]

• 1. order - Flex Item의 순서를 설정
  : 기본 값은 0이며, 요소의 순서를 정한다. (양수나 음수로 바꿀 수 있다.)
  

  

•  2. flex-grow : 속성은 여분의 공간이 있다면 아이템을 "확장(grow)"할 때 사용한다. - 증가너비 비율 설정
  - 기본값은 0
  

  

•  3. flex-shrink : 속성은 여분의 공백이 없을 경우 아이템을 "축소(shrink)"할 때 사용한다. - 감소너비 비율 설정
  - 기본값은 1
  
  
•  4. flex-basis : Flex Item의 (공간 배분 전) 기본 너비 설정
  - 기본값은 auto
• 주의 :  flex-basis의 기본값은 auto입니다만 단축 속성인 flex에서 그 값을 생략할 경우 0이 적용됩니다.
  auto - > 0 
• .item {
  flex: 1 1 20px; /* 증가너비 감소너비 기본너비 */
  flex: 1 1; /* 증가너비 감소너비 */
  flex: 1 20px; /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됩니다) */
  }
  
• 5. align-self : align-items값을 무시하고 flex요소를 세로선상에 정렬한다.
  

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

•  요약

  Container	Item
  display Flex Container를 정의 flex-flow flex-direction와 flex-wrap의 단축 속성 flex-direction Flex Items의 주 축(main-axis)을 설정 flex-wrap Flex Items의 여러 줄 묶음(줄 바꿈) 설정 justify-content 주 축(main-axis)의 정렬 방법을 설정 align-content 교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상) align-items 교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄)	order Flex Item의 순서를 설정 flex flex-grow, flex-shrink, flex-basis의 단축 속성 flex-grow Flex Item의 증가 너비 비율을 설정 flex-shrink Flex Item의 감소 너비 비율을 설정 flex-basis Flex Item의 (공간 배분 전) 기본 너비 설정 align-self 교차 축(cross-axis)에서 Item의 정렬 방법을 설정