• flex-direction의 row-reverse와 column-reverse 옵션이 있음.
• order 속성을 통해서 개별 자식 요소들의 순서를 변경할 수 있음. 자기 자신의 위치를 기준으로 + 혹은 - (Order의 value 정확히 어떤 규칙?)
• align-self 일부에만 align-itmes를 적용
• flex-wrap: nowrap / wrap / wrap-reverse
• flex-flow: direction과 wrap을 함께 쓰는 속성.
• align-content: 줄사이 간격 지정.

CSS flex

• 플렉스는 박스의 크기, 방향, 순서, 정렬, 간격을 제어하는 새로운 박스 모델
• 아이템 크기 자동 분배가 가능하다. (flex-grow/-shrink/-basis)
• 진행축 정렬 (Justify-content) 아이템 사이사이가 옛날에는 auto margin이었으나 이제는 Free space라고 함.
• 교차축 정렬 (Align-items/-self/-content)
• 배치 순서 변경 (Order)
• 감싸기 (flex-direction/-wrap/-flow)

Flex 용어

• flex container: display 속성 값이 "flex" 또는 "inline-flex"인 박스. 내부에 흐르는 자식 콘텐츠(텍스트 노드 포함)는 저절로 플렉스 아이템이 된다.
• flex item: flex 속성이 추가된 부모의 자식 요소
• free space: flex item이 점유하는 영역(flex-basis, width, height, padding, border, margin)을 제외하고 남은 공간.
• main axis: 진행축 (초기 값은 행!)
• cross axis: 교차축 align-* 속성의 기준이 되는 축.

Flex Container

• display: flex를 활용하면, 해당 콘테이너가 블록 요소처럼 동작하나, inline-flex를 활용하면 inline 요소처럼 동작한다.

플렉스 아이템의 팽창과 수축

• flex-grow는 팽창지수, 기본값 0. 팽창하지 않는다는 뜻. 양의 FS이 발생할 시 플렉스 아이템의 팽창을 제어. 음수사용 불가. 0 또는 1
• flex-shrink는 수축지수, 기본값 1. 자동으로 수축한다는 뜻. 음의 FS가 발생시 플렉스 아이템의 수축을 제어. 보통 0 또는 1. 음수 사용불가. flex-shrink:0을 적용하면 음의 FS 발생해도 수축하지 않음.
• flex-basis 기본값은 auto. flex-item 박스에 적용되어있는 width 값 등의 값에 의해 기준값이 정해진다는 뜻. 실무에서는 보통 0으로 설정. flex 아이템의 진행방향 기본크기를 설정함으로서 FS 초기 값에 영향을 준다.
• flex: 1 === {flex: 1 1 0}

플렉스 아이템의 방향과 순서

• flex-wrap: 아이템이 박스 끝에 닿았을 때 줄바꿈을 할 것인지에 대한 속성.
• order: flex item의 배치 순서. 모든 아이템의 요소 기본 값 0. 다른 요소와 상대적인 값으로 배치된다.

플렉스 아이템의 정렬과 간격

• align-items: 플렉스 아이템이 한 줄일 떄 교차 축 정렬. baseline 아이템에 들어가있는 텍스트의 베이스라인을 기준으로 정렬. (거의 쓸 일 없음...)
• align-self: 플렉스 아이템의 독립적 교차축 정렬.
• align-content: 플렉스 아이템의 여러 줄 교차 축 정렬과 간격. 여러 줄 플렉스 컨테이너에 적용.
• gap: 다중 컬럼(columns), 플렉스, 그리드 아이템 사이의 간격. (flex에서 gap을 많이 쓰지는 않음.)

https://flexbox.help/