Applying Flex Layout

Let's take a look at the flex properties we used on the .social-media class:

HTML

<a
  href="https://www.instagram.com/geekhaus.club/"
  class="social-media"
  target="_blank"
>
  <svg>...</svg>
</a>

CSS

.social-media {
  width: 40px;
  height: 40px;
  background: yellow;
  border-radius: 50%;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

Due to the display: flex on the social-media class, the <a> tag becomes a flex container.

This means that the <svg> element inside the <a> tag becomes an item within the flex container.

Flex containers by default align items in a row direction.

We use justify-content: center; to center the elements along the main axis (horizontal axis) and align-items: center; to center them along the cross axis (vertical axis).

In summary:

CSS

.social-media {
  display: flex;
  justify-content: center;
  align-items: center;
}

display: flex; turns the <a> tag into a flex container,

justify-content: center; centers the Instagram SVG logo along the horizontal axis within the flex container,

align-items: center; centers the SVG logo along the vertical axis.

In the next lesson, we'll use what we've learned about flex to further develop the introduction section of a webpage :)

Want to learn more?

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

Learn moreSign In