실습 템플릿 Flexbox 레이아웃

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

.header-container

.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 아이템들을 세로 방향(종축)으로 가운데 정렬합니다.

.navbar .container

.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;: 첫 번째와 마지막 아이템을 컨테이너의 양 끝에 배치하고, 나머지 아이템 사이에 동일한 공간을 배분합니다.

.navbar .nav-menu

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

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

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!