1. display: flex;

flex : 레이아웃 배치 전용 기능

• 부모요소 : container
• 자식요소 : item
  메인 축 : 아이템이 배치되는 축의 방향
  교차 축 : 메인축과 수직이 되는 축

---

2. flex-direction: row;

flex-direction : 아이템이 배치되는 축의 방향을 결정

1. row(기본값)

• 메인 축 : 가로
• 교차 축 : 세로
  row-reverse : 가로 역순 배치

2. column

• 메인 축 : 세로
• 교차 축 : 가로
  column-reverse : 세로 역순 배치

---

3. justify-content: space-around;

justify-content : 메인축 방향에서 아이템 정렬을 결정하는 속성

• flex-str : 시작점 정렬(기본값)
• flex-end : 끝점 정렬
• center : 가운데 정렬
• space-between : 아이템 사이에 균일한 여백
• space-evenly : 아이템상 + 양 끝에 균일한 여백
• space-around : 아이템 둘레에 균일한 여백

/* item1의 문자 위치를 중앙으로 배*/
 #item1{
     display: flex;
     justify-content: center;
     align-items: center;
  }

---