잘 이해하고 쓰면 좋을 flex

flex-items

order
order의 숫자가 크면 클수록 정렬의 뒷 순서로 밀린다.
주의해야 할 점은 구조적으로는 바뀌지 않고 보여주는 순서만 바뀜

flex
grow, shrink, basis의 단축속성이다.

flex-grow
기본 값은 0
기본 너비를 제외한 공백을 나누어 계산한다.
값이 클수록 값의 배수만큼 크기에서 상대적인 우위를 차지한다. 공백이 없을때에는 적용되지 X,
그땐 shrink를 사용한다.

e.g. ( 1 / 2 / 1 ) => ( 25% : 50% : 25% )

flex-shrink
기본값은 1이다.
값이 작을수록 커지며 flex-items들의 크기에서 숫자만큼의 우위를 차지한다.
감소의 유무(0,1)로 레이아웃을 잡는다. 줄어들지 않아야 하는 요소는 0으로 설정한다.

flex-basis
기본값은 auto이며 item의 기본 너비를 설정한다.
item들의 width 값이 100px라도 flex-basis를 통해 기본 너비를 단위만큼 만들어 비율을 설정할 수 있다.

align-self
개별 아이템의 수직 정렬을 만든다.