flex-container에 사용하는 속성

• display:flex
• 자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법을 설정하는 방법입니다
• 부모 요소를 flex-container 자식 요소를 flex-item 이라고 부릅니다.
• 1차원적 레이아웃(x축, 혹은 y축)을 위해 주로 사용합니다.

flex-direction

• 컨테이너 내 아이템을 배치할 때 주축 및 방향을 지정합니다.
• row : 기본값. 왼쪽에서 오른쪽 (주축이 행 방향)
• column: 위에서 아래 방향 (주축이 열 방향)
• row-reverse: 오른쪽에서 왼쪽
• column-reverse: 아래에서 위 방향

justify-content

• 주축을 기준으로 배열의 위치를 조절하거나 아이템 간의 설정을 할 수 있습니다.
• flex-start, flex-end, center, space-between, space-around, space-evenly

주어진 코드를 가지고 flex 속성을 추가해 아래와 같은 이미지로 배치해 보세요!