Skip to main content
Practice

Practical Template Flexbox Layout

How is the flex layout used in the practical template?


.header-container

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

  • display: flex;: Makes the element a flex container. The child elements of this container automatically become flex items.

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

  • align-items: center;: Centers the flex items along the cross axis (horizontal axis).

  • justify-content: center;: Centers the flex items along the main axis (vertical 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 along the cross axis (horizontal axis).

  • justify-content: space-between;: Distributes the flex items so the first and last items are at the edges of the container, with equal space between the remaining items.


.navbar .nav-menu

.navbar .nav-menu {
  display: flex;
  align-items: center;
  background: white;
}
  • Here, flex container is also used to arrange items in a row and align them center along the cross axis (horizontal axis).

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.