Flex는 레이아웃 배치 전용 기능으로 고안되었습니다.

Flex의 속성은 1,컨테이너에 적용하는 속성 2,아이템에 적용하는 속성

컨테이너에 속하는 속성들

flex-direction(배치 방향 설정)
row (기본값)
아이템들이 행(가로) 방향으로 배치됩니다.

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

column
아이템들이 열(세로) 방향으로 배치됩니다.
그냥 block 요소들을 쌓아 놓은 것처럼 보이죠?

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

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

flex-wrap(줄넘김 처리 설정)

.container {
flex-wrap: nowrap;
/ flex-wrap: wrap; /
/ flex-wrap: wrap-reverse; /
}

flex-flow
flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성이에요.

justify”는 메인축(오뎅꼬치) 방향으로 정렬

“align”은 수직축(오뎅을 뜯어내는) 방향으로 정렬