본문으로 건너뛰기

Practice Template Flexbox Layout

Practice Template Flexbox Layout

How is the flex layout used in the practice template?


.header-container

.header-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 128px;
padding: 24px;
}
  • display: flex;: Turns the element into a flex container. The child elements of this container automatically become flex items.

  • flex-direction: column;: Arranges the flex items in a vertical direction.

  • align-items: center;: Centers the flex items horizontally (across the cross-axis).

  • justify-content: center;: Centers the flex items vertically (along the main axis).


.navbar .container

.navbar .container {
display: flex;
align-items: center;
justify-content: space-between;
z-index: 10;
height: 60px;
width: 100%;
}
  • align-items: center;: Centers the flex items horizontally (across the cross-axis).

  • justify-content: space-between;: Places the first and last items at the ends of the container and distributes equal space between the other items.


.navbar .nav-menu

.navbar .nav-menu {
display: flex;
align-items: center;
background: white;
}
  • Here too, the flex container is used to arrange the items in a single line and center them horizontally (across the cross-axis).