CSS Flex   CSS 플렉스

1. CSS Flex

  ※ ☞ MDN Flexbox docs 참조

  ㅇ container 속성
     - display : flex;
     - flex-direction : row (기본) | row-reverse | column | column-reverse;
     - flex-wrap : nowrap (기본) | wrap | wrap-reverse;
     - flex-flow : (flex-direction) (flex-wrap);
     - justify-content : flex-start (기본) | flex-end | center | space-between | space-around | 
                         space-evenly;
        . space-between (가장자리 우선)
        . space-around (가장자리 공간 줌)
        . space-evenly (균등 간격)
     - align-items : flex-start | flex-end | center | stretch | baseline; 
        . flex-start, flex-end, center (아이템 박스의 가장자리 끝선, 중간선으로 정렬)
        . stretch (높이 미설정 item들에 주변 가장 큰 height 또는 weight와 같게 함)
        . 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 : (순서 정수값)
     - flex-grow : (전체 크기에 비례, 크기 늘리는 양의 정수값, 기본값 0)
        . 1 (전체 크기가 커지는 정도에 단순 비례)
     - flex-shrink : (크기 줄이는 양의 정수 값, 기본값 1)
     - flex-basis : (px,%,em,rem 등으로 직접 크기 값을 줌, 기본값 auto)
     - flex : none | (flex-grow) (flex-shrink) (flex-basis)
     - align-self : auto | flex-start (기본) | flex-end | center | baseline | stretch
        . 아이템별 개별 배치

  ㅇ ... (편집중) ...