flex

[flex : 한 방향 레이아웃 시스템(1차원)]

* display: inline, block, inline-block, flex; 
-> display는 상위개념 / flex-direction는 하위개념 ( display: flex; 로 전체 구성을 flex 선언했지만 일부는 세로정렬(column)하고싶을 때~)
=> 컨테이너에 display: flex; 를 설정하는 것으로 시작함


=======flex 컨테이너에 적용하는 속성들; 전체 아이템에 적용=======
1) flex-direction (배치방향) : row, row-reverse, column, column-reverse;
2) flex-wrap (줄넘김 처리) : nowrap, wrap, wrap-reverse;
3) flex-flow (flex-direction flex-wrap 한꺼번에 지정) : 방향과 줄넘김을 동시에 선언
   ex) flex-flow: row nowrap;  
4) justify-content (주축 방향 정렬) : flex-start, flex-end, center, space-between, space-around, space-evenly;
5) align-items (교차축 방향 정렬) : stretch, flex-start, flex-end, center, baseline;
6) align-content (행 2개 이상일 때 정렬) : stretch, flex-start, flex-end, center, space-between, space-around, space-evenly;

=======flex 아이템에 적용하는 속성들; 해당 아이템에 적용=======
1) flex-basis (flex 아이템의 기본크기) : width, height에 사용되는 모든 단위 사용가능. flex-direction이 row일 때는 너비, column일 때는 높이
   ex) flex-basis: 100px;     -> 원래의 width가 100px이 안되는 아이템의 너비가 100px로 늘어남 & 원래 100px이 넘는 아이템은 그대로 유지됨
   cf) width: 100px;     -> 원래의 width가 100px이 넘든, 넘지 않든 모든 아이템의 너비를 100px로 맞춤. 이 때 넘치는 text는 word-wrap: break-word;
2) flex-grow (flex 아이템을 유연하게 늘림 ): 단위x, 상수o. 지정된 상수의 비율로 flex-basis를 제외한 여백부분's 크기를 늘림. 기본값 0
3) flex-shrink (flex 아이템을 유연하게 줄임) : 단위x, 상수o. 지정된 상수의 비율로 flex-basis를 제외한 여백부분's 크기를 줄임. 기본값 1
   ex) flex-shrink: 0; 컨테이너가 아무리 작아져도 아이템의 크기가 flex-basis보다 작아지지 않음
4) flex (flex-grow, flex-shrink, flex-basis 한꺼번에 지정)
   ex) flex: 2 1 0
        flex: 1 = flex 1 1 0
5) align-self (개별항목의 교차축 정렬) : stretch, flex-start, flex-end, center, baseline;
6) order (배치 순서) : 단위x, 상수o
7) z-index (z축 정렬) : 단위x, 상수o