1. container에 적용되는 속성들
1. display : flex
== flex 선언
2. flex-direction
== 기본 row : >>>> , 역방향 row-reverse <<<<<
==세로를 기준 column , 세로 역방향 column-reverse
3. flex-wrap
==기본 nowrap : 작아져도 줄바꿈 안함
==wrap : 작아지면 넘치는건 다음줄로 넘어감/ reverse 가능
4. flex-flow
==2번과 3번을 한번에 선언 가능하다 column wrap
5. justify-content
==순서는 유지하되 왼쪽 오른쪽 정렬 flex-start , flex-end , center
== space-evenly 간격 일정하게 ,
6. align-items
==items를 수직으로 정렬하고싶을때 center
==하나의 커다란 items의 중심으로 맞추고싶을때 baseline
7. align-content
==넘치는것들을 정렬 space-between , center ..
※baseline 등은 브라우저 지원 여부를 확인해야 한다
2. item 에 적용되는 속성들
1. order
==숫자로 순서를 주면 순서가 바뀐다
2. flex-grow
==기본은 0이라 기본 크기를 유지하다가 혼자만 1주면 남는 부분을 가득 채우고 나머지도 숫자를 주면 해당 비율로 화면을 나눠서 차지한다
3. flex-shrink
==기본은 0이며 화면 크기가 작아질때 숫자에 따라서 작아지는 비율이 움직이게 된다
4. flex-bases
==기본은 auto, 20% 등 %를 주면 2와 3이 모두 이 %로 움직이게된다
5. align-self
==한개의 아이템에만 정렬을 주고싶은 경우 사용된다
3. 수직축과 반대개념 수평축 중심으로 움직인다!