Skip to main content
Practice

Applying Flex Layout

Now, let's take a look at the flex properties we used for the .social-media class in the last session.

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 property in the .social-media class, the a tag becomes a flex container.

Likewise, the svg element inside the a tag becomes a flex item within the container.

By default, the flex container aligns its items along the horizontal axis (row).

Here, justify-content: center; is used to center the elements along the main axis (horizontal axis), and align-items: center; is used to center the elements along the cross-axis (vertical axis).

To summarize:

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 within the flex container along the horizontal axis,

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

In the next lesson, we will utilize what we've learned about flex to further enhance the introduction section of our webpage :)

Want to learn more?

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