CSS Flex   CSS 플렉스

1. 플렉시블 박스 (Flexible Box)

  ㅇ 웹사이트 화면의 구조 설계를 보다 쉽게 하기 위해,
     - 가변적인 박스로 만들어서, 이들을 화면에 정렬(배치)시키는 CSS 기술


2. CSS Flex                                              ☞ MDN Flexbox docs 참조

  ㅇ container 속성 (플렉시블 부모 박스의 속성)

     - display : flex | inline-flex;

     - flex-direction : row (기본) | row-reverse | column | column-reverse;
        . row : 수평 줄 방향 (좌에서 우로)
        . column : 수직 열 방향 (위에서 아래로)

     - flex-wrap : nowrap (기본) | wrap | wrap-reverse;
        . 한 줄에 flex item들을 모두 수용할 지 아니면 줄바꿈할 지 여부
        . wrap-reverse : 여러 줄로 배치하되, 역 방향

     - flex-flow (단축 속성) : (flex-direction) (flex-wrap);
        . (flex-direction),(flex-wrap)를 한번에 지정할 수 있는 단축 속성

     - justify-content (주축 방향) : flex-start (기본) | flex-end | center | space-between
                                     | space-around | space-evenly;
        . (주축 방향 : flex-direction 속성이 가리키는 정해진 방향)
        . 항목 배치의 정렬 기준을 정함
           .. space-between (가장자리 우선)
           .. space-around (가장자리 공간 줌)
           .. space-evenly (균등 간격)

     - align-items (교차축 방향) : stretch (기본) | flex-start | flex-end | center | baseline; 
        . (교차축 방향 : 주축에 수직한 방향)
        . stretch (아이템 박스들의 크기를 확장시켜 배치)
           .. 높이 미설정 item들의 경우에, 주변 가장 큰 height 또는 weight와 같게 함
        . flex-start, flex-end (아이템 박스들을 가장자리 처음,마지막 끝선에 정렬)
        . center (아이템 박스들을 중간선으로 정렬)
        . baseline (아이템 박스 내부의 텍스트를 기준선으로 맞춤)

     - align-content : flex-start | flex-end | center | stretch | space-between | space-around;
        . (아이템 박스 내부의 컨텐츠 기준으로 정렬)
        . flex-start, flex-end, center (아이템 박스 내부의 컨텐츠 기준으로 수직 정렬)
        . stretch (각 item 높이를 가능한 최대로 넓혀 수직 정렬)
        . space-between, space-around (가장자리에 붙이거나, 주가장자리 공간 줌)

  ㅇ item 속성 (자식 박스의 속성)

     - order : (순서 정수값, 기본값 0)
        . 아이템 박스들의 순서 바꾸기
        . 숫자의 크기를 이용하여, 순서 배치할 수 있으며, 음수 값도 가능 

     - align-self (교차축 방향) : flex-start (기본) | flex-end | center | baseline
                                  | stretch | auto 
        . 항목별로 일일이 속성값을 정해주면서 개별적으로 배치
        . auto : 부모 박스의 align-items 속성값을 상속 받음
           .. 만일, 부모 박스 속성값이 없으면, strech 속성값이 적용됨

     * 아래 속성들은, 플렉스 아이템들의 크기를 점진적으로 늘리고 줄일 수 있음
     - flex-grow : 0 (기본 : 0 보다 큰 값) | (크기 늘리는 양의 정수값 : 비율값)
        . 1 : 항목 크기가, 전체 크기에 비례하여, 똑같이 커짐 (단순 비례)

     - flex-shrink : 1 (기본 : 1 보다 큰 값) | (크기 줄이는 양의 정수 값 : 비율값)
        . flex-basis와 연동되어, 그 기본 크기 보다 정해준 배수 값으로 줄여줌
        . 그러나, flex-basis로 정해준 기본 크기를 넘으면, 더 이상 flex-shrink 영향 없게 됨

     - flex-basis : auto (기본) | (length : 비율값)
        . 적정 너비의 기본 크기를 정해주는 값
        . (px,%,em,rem 등 단위로 직접 크기 값을 줌, 기본값 auto)

     - flex (단축 속성) : (flex-grow) (flex-shrink) (flex-basis)
        . (flex-grow),(flex-shrink),(flex-basis)를 한번에 지정할 수 있는 단축 속성
        . 1 1 auto (기본값)
        . 0 auto (0 1 auto 동일)
        . initial (0 1 auto 동일)
        . auto (1 1 auto 동일)
        . none (0 0 auto 동일)