flex 관련 이론 (3)

align-self

 - 각각의 flex 아이템들의 교차 축 정렬 방식을 제어할 때 사용한다.

flex-grow

 - flex 아이템이 기본 크기보다 커지게 할 때 사용하며, 컨테이너 내부에서 할당 받는 공간을 상대적으로 정의할 수 있다.

 - 2번째와 4번째 flex 아이템의 크기가 다른 flex 아이템에 비해 커졌으며, 4번째 아이템이 첫번째 보다 2배 큰것을

   볼 수 있다.

 - 컨테이너의 크기가 작아지게되면 작동하지 않는다.

 

flex-shrink

 - flex-grow 속성과 반대로 작아지게 할 때 사용한다.

 - 컨테이너의 너비가 좁을때 작동하며, 넓어지게되면 작동하지 않는다.

flex-basis

 - flex 아이템의 초기 크기를 결정한다. 단위가 있는 값을 넣어야 한다.( 예 : px, %)

<너비 적용 x>

order

 - flex 아이템의 순서를 변경할 때 사용하며, html 상의 순서는 변동이 없다.