Creating a Self-Introduction Section Using Flex
The self-introduction section of the website is structured as follows:
<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>
.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