Applying Flex Layout
Let's take a look at the flex properties we used on the .social-media
class:
<a href="https://www.instagram.com/geekhaus.club/" class="social-media" target="_blank" > <svg>...</svg> </a>
.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:
.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