본문으로 건너뛰기

실습 템플릿 Flexbox 레이아웃

실습 템플릿 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 컨테이너를 사용하여 아이템들을 한 줄에 나란히 배열하고, 가로 방향(횡축)으로 가운데 정렬하도록 설정했습니다.