CSS Flexbox

Flex -> 한 방향 레이아웃 시스템(1차원)

~엘리먼트의 배치 방법을 단순화하는 도구~
flex container 와 flex item 있다.
컨테이너가 flex 영향을 받는 전체공간, 설정된 속성에 따라 각각
의 아이템들이 어떤 형태로 배치되는 것!

flex container : 부모 엘리먼트인 div.container
 화면 크기의 변화에 대응하는 웹사이트를 만드는 데 유용한 도구
 자식 엘리먼트는 부모 컨테이너의 크기와 위치에 따라 변경됨
 display 속성을 flex나 inline-flex로 설정!
  ex) div.container {
        display: flex;
      } - flex item들은 가로방향으로 배치, 자신이 가진 
          내용물의 width 만큼만 차지, height는
          컨테이너의 높이만큼 늘어남 
     // inline-flex는 컨테이너가 주변 엘리먼트들과 어떻게
        어우러질지 결정하는 값
 
 메인축(Main Axis)를 오뎅꼬치라고 생각하면 
 메인축과 수직인 축을 수직축 또는 교차축(Cross Axis)
 Flex item들이 오뎅인 셈!
 오뎅(Flex item)들이 꼬치(메인축)를 따라 
 쭉 꽂혀서 정렬된 상태!
 
flex item : 자식 엘리먼트인 div.item


*justify-content*
 메인축 방향으로 item정렬하는 속성     
 
  1.flex-start : item을 시작점으로 정렬
                 가로 배치(row)일 때는 왼쪽,
                 세로 배치(column)일 때는 위,
                 그 사이 또는 앞에 공간x
  
  2.flex-end : item을 끝점으로 정렬,
               가로 배치(row)일 때는 오른쪽,
               세로 배치(column)일 때는 아래,
                그 사이나 뒤에 공간x
  
  3.center : 가운데로 정렬
  
  4.space-around : item은 각 item의 둘레에 동일한 간격
                   으로 배치
  
  5.space-between : item사이에 동일 간격으로 배치되지만 첫 엘리먼트 
                    앞이나 마지막 엘리먼트 뒤에 추가 공간x
  (추가 공간x 것은 여백과 테두리가 유지되지만 엘리먼트 사이에
   더이상 공간이 추가되지 않음을 의미, 각 개별 flex item
   의 크기는 이 속성에 의해 변경되지 x!)
  
*align-items*
 수직축으로 방향 정렬

  1.flex-start : item을 시작점으로 정렬
                 가로 배치(row)일 때는 위,
                 세로 배치(column)일 때는 왼쪽
                 
  2.flex-end : 끝으로 정렬
               가로 배치(row)일 때는 아래,
               세로 배치(column)일 때는 오른쪽
               
  3.center : 가운데로 정렬
  
  4.baseline : 콘텐츠 하단이 서로 정렬됨
  
  5.stretch : item들이 수직축 방향으로 
              맨 위에서 맨 아래까지 쭈욱 늘어남
              (높이 지정되면 안 늘어나고 높이가 최소 또는
               높이가 지정되지 않으면 늘어남
               min-height값을 주기..!?)
               
*flex-basis*
flex item의 기본 크기 설정 
item이 늘어나거나 줄어들기 전에 너비 지정 가능

*flex-grow*
item이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성

숫자값이 들어가고, 0보다 큰 값이 세팅되면 해당 item이 
유연한(flexible)박스로 변하고 원래 크기보다 커지며 
빈 공간을 메움. 기본값은 0이라 따로 적용하기 전까지는 
item이 늘어나지 않음..
item의 flex-basis를 제외한 여백 부분을 flex-grow에 
지정된 숫자의 비율로 나누어 가진다!! <여백의 비!!>

*flex-shrink*
item이 flex-basis의 값보다 작아질 수 있는지 결정하는 속성
숫자값이 들어가고, 0보다 큰 값이 세팅되면 해당 item이 
유연한(flexible)박스로 변하고 flex-basis보다 작아짐.
기본값이 1이라 세팅안해도 item이 flex-basis보다 작음..

0으로 세팅하면 item의 크기가 flex-basis보다 작아지지 않기 
때문에 고정폭의 컬럼 만들 수 있고 고정 크기는 width로 설정!

*flex*
flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 
있는 축약형 속성
(flex: 1; 이런 식으로 flex-basis생략해서 쓰면
 flex-basis 값은 0이됨)
 세 가지 속성을 한 줄로 선언!!
 grow, shrink, basis 차례로
 
*flex-wrap*
컨테이너가 더 이상 item을 한 줄에 담을 여유 공간이 없을 때
item 줄바꿈을 어떻게 할지 결정하는 속성

  1.nowrap : 줄바꿈 하지 않음. 넘치면 그냥 삐져 나감
  
  2.wrap : 줄바꿈함.
   
  3.wrap-reverse : 줄바꿈하지만 item을 역순으로 배치.
  
*align-content*
flex-wrap: wrap;이 설정된 상태에서 item들의 행이 2줄 
이상 되었을 때의 수직축 방향 정렬을 결정하는 속성

  1.flex-start : 공백없이 맨 위 배치
  
  2.flex-end : 공백없이 맨 아래 배치
  
  3.center : 공백없이 중앙 배치
  
  4.space-between : 맨 위나 맨 아래에 동일 간격으로 배치
  
  5.space-around : 각 둘레에 동일 간격으로 배치
  
  6.stretch : 위쪽에서 아래쪽으로 쭉 늘어남
  
*flex-direction*
item이 배치되는 축의 방향을 결정하는 속성,
즉 메인축(오뎅꼬치)의 방향을 가로로 할거냐 세로로 할거냐를 정함

  1.row : 행(가로)방향으로 배치
  
  2.row-reverse : 오른쪽 상단부터 역순으로 가로배치
  
  3.column : 열(세로)방향으로 배치
  
  4.column-reverse : 왼쪽 하단부터 역순으로 세로배치

+++item배치할 때 메인축(오뎅꼬치)에 사용되는 속성+++
  1.justify-content
  2.flex-wrap
  3.flex-grow
  4.flex-shrink
+++item배치할 때 교차축에 사용되는 속성+++
  1.align-items
  2.align-content
 flex-direnction을 사용하여 메인축과 교차축 전환 가능
 
*flex-flow*
flex-direction과 flex-wrap 한번에 지정 가능한 단축속성
direction, wrap 순으로 쓰기

++justify는 메인축(오뎅꼬치)방향으로 정렬++
++align은 수직축(오뎅 뜯어내는)방향으로 정렬++