🍑 display

display: flex;

• block요소
• Container가 수직으로 쌓인다.

display: inline-flex;

• inlinek요소
• Container가 수평으로 쌓인다.

🍑 flex-flow

🙌🏻 flex-direction과 flex-wrap의 단축속성

flex-direction

 Items의 주 축을 설정

row
Items를 수평축으로 표시


row-reverse
Items를 row의 반대 축으로 표시


column
Items를 수직축으로 표시


column-reverse Items를 column의 반대축으로 표시

flex-wrap

Items의 여러 줄 묶음 설정
⭐ 기본적으로 Items는 한 줄에서만 표시되고 줄바꿈 되지 않는다.
⭐ 지정된 width,height를 무시하고 한 줄에서만 가변하기 때문에 줄바꿈 하려면 wrap을 사용해야한다.

nowrap (default)
모든 Items를 여러 줄로 묶지 않음 (한 줄에 표시)

wrap
Items를 여러 줄로 묶음

wrap-reverse
Items를 wrap의 역 방향으로 여러 줄로 묶음