lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

webIntroBioChapter1Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroBioChapter2Title

webIntroBioChapter3Title

# 실습 템플릿 Flexbox 레이아웃

실습 템플릿에 `flex` 레이아웃이 어떻게 사용되었을까요?

<br />

**.header-container**

```css
.header-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 128px;
  padding: 24px;
}
```

- `display: flex;`: 요소를 flex 컨테이너로 만듭니다. 해당 컨테이너의 자식 요소들은 자동으로 flex 아이템이 됩니다.

- `flex-direction: column;`: flex 아이템들이 세로 방향으로 배열됩니다.

- `align-items: center;`: flex 아이템들을 가로 방향(횡축)으로 가운데 정렬합니다.

- `justify-content: center;`: flex 아이템들을 세로 방향(종축)으로 가운데 정렬합니다.

<br />

**.navbar .container**

```css
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  height: 60px;
  width: 100%;
}
```

- `align-items: center;`: flex 아이템들을 가로 방향(횡축)으로 가운데 정렬합니다.

- `justify-content: space-between;`: 첫 번째와 마지막 아이템을 컨테이너의 양 끝에 배치하고, 나머지 아이템 사이에 동일한 공간을 배분합니다.

<br />

**.navbar .nav-menu**

```css
.navbar .nav-menu {
  display: flex;
  align-items: center;
  background: white;
}
```

- 여기서도 flex 컨테이너를 사용하여 아이템들을 한 줄에 나란히 배열하고, 가로 방향(횡축)으로 가운데 정렬하도록 설정했습니다.