Skip to main content
Crowdfunding
Python + AI for Geeks
Practice

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.

Want to learn more?

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