Creating a Self-Introduction Section Using Flex

We have structured the self-introduction section on a website as follows:

Copy
<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>

Copy
.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;
}

We used the bio-container class for the outermost div.

The display: flex; in bio-container makes the outer box a flex container, arranging the items inside the container horizontally.

The justify-content: space-around; means that there is an equal amount of space around the items, and align-items: center; positions each item in the center of the box.

The flex-wrap: wrap; sets the items that exceed the width of the box to move to the next line, and padding-top: 24px; creates a padding of 24px at the top of the box.

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

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

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

Inside the flex items, the p tag uses the bio-text class to change the font color to grey and set the top margin to 8px.