Lecture

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 :)

Lecture

AI Tutor

Design

Upload

Notes

Favorites

Help