Lecture

Creating a Self-Introduction Section Using Flex

The self-introduction section of the website is structured as follows:


HTML
<div class="bio-container"> <div class="bio-item"> <h4>Date of Birth</h4> <p class="bio-text">2000.01.01</p> </div> <div class="bio-item"> <h4>MBTI</h4> <p class="bio-text">ENTJ</p> </div> <div class="bio-item"> <h4>Location</h4> <p class="bio-text">New York</p> </div> </div>
CSS
.bio-container { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; padding-top: 24px; gap: 16px; } .bio-item { text-align: center; width: 80px; } .bio-text { color: grey; margin-top: 8px; }

bio-container Class

The outermost div uses the bio-container class.

The display: flex; within bio-container turns the outer box into a flex container, aligning the items within horizontally.

The justify-content: space-around; ensures even spacing between these items, while align-items: center; positions each item centrally within the box.

The flex-wrap: wrap; allows items to flow onto the next line if they exceed the box's width, and padding-top: 24px; creates a 24px space at the top of the box.

Lastly, gap: 16px; creates a 16px gap between each item.


bio-item Class

Inside the outer container, there are three div boxes, each using the bio-item class.

These boxes are the items within the flex container. Here, text-align: center; centers the text within the item, and width: 80px; sets the box width to 80px.

Within the flex item, the p tag uses the bio-text class to change the font color to grey and set a top margin of 8px.

Lecture

AI Tutor

Design

Upload

Notes

Favorites

Help