flex 속성

display:flex;

Flex 컨테이너에 display:flex; 를 적용하는 것이 시작

Flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼만 차지하게 됨

마치 inline 요소들 처럼요. height는 컨테이너의 높이만큼 늘어납니다.

row (기본값)

아이템들이 행(가로) 방향으로 배치됩니다.

row-reverse

아이템들이 역순으로 가로 배치됩니다.

column

아이템들이 열(세로) 방향으로 배치됩니다.

그냥 block 요소들을 쌓아 놓은 것처럼 보이죠?

column-reverse

아이템들이 역순으로 세로 배치 됩니다.

크기가 작은 모바일 기기에서 column으로 배치하다가 일정 폭 이상이 되면 row로 바꿔주는 식으로 반응형 레이아웃을 구현할 수도 있겠네요~