CSS - Flexbox
Lesson 15 of 16 in Coddy's Instagram Page Clone | Front-End Project course.
Finally, we need to style, space, and arrange the posts
Challenge
Easy- First and foremost, give the
#feeda display of flex - Set its justify-content property to space-evenly, so they are evenly spaced throughout the width
- Give the
.postclass a width of 30%, so each post takes up 30% of the full width - Lastly give each post a margin of 0.3em, so that the spacing between them is accurate
Try it yourself
<!DOCTYPE html>
<html>
<head>
<title>Instagram</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="background">
<section id="profileInfo">
<div id="left">
<img alt="Profile Picture" src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FB1W4ovz1wpFwKXcrZmzV%2Finjected_t0?alt=media&token=799f5980-a8c4-43a6-82ca-1f8ba57a360f">
<h2 id="username">zimbakovtech</h2>
</div>
<div id="right">
<div id="userTop">
<div class="button" id="follow">Follow</div>
<div class="button">Message</div>
<div class="button"><img src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FYGTvUtASn8CI5DiXWvFs%2Finjected_t0?alt=media&token=631ebb8f-3a01-4dec-b525-8a7460661676" alt="Add"></div>
<img id="more" src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FYGTvUtASn8CI5DiXWvFs%2Finjected_t1?alt=media&token=351f4b48-6f68-4cd7-83c3-0c7f67bed30b" alt="more">
</div>
<div id="infoMid">
<p><b>3</b> posts</p>
<p><b>110</b> followers</p>
<p><b>35</b> following</p>
</div>
<div id="bioBot">
<p><b>Zimbakov Tech</b><br>
<span style="color: grey">Tutor / Teacher</span><br>
Freelancer, course creator and coding tutor<br>
Coding | Courses | Websites | Apps<br>
Course Creator at Coddy, Inc</p>
</div>
</div>
</section>
<hr>
<section id="posts">
<div id="bar">
<div class="option" id="active">
<img src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FNClQd1AbT751LPf6TLg0%2Finjected_t0?alt=media&token=a193c280-2892-48cf-a414-e84172459222" alt="Posts">
<p>POSTS</p>
</div>
<div class="option">
<img src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FNClQd1AbT751LPf6TLg0%2Finjected_t1?alt=media&token=aa5b3f29-b2ad-416e-a9cb-930cd8a857f7" alt="Reels">
<p>REELS</p>
</div>
<div class="option">
<img src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FNClQd1AbT751LPf6TLg0%2Finjected_t2?alt=media&token=a67f791f-f1f1-475b-9766-38b160bb8ed5" alt="Tagged">
<p>TAGGED</p>
</div>
</div>
<div id="feed">
<img class="post" src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FgSLCVGPMnzw5dtzxx8rE%2Finjected_t2?alt=media&token=0e2d1d14-7c25-40e9-8813-cd507c7973b8" alt="Post3">
<img class="post" src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FgSLCVGPMnzw5dtzxx8rE%2Finjected_t1?alt=media&token=ed9a6d5b-9c97-4296-844a-356010ffde59" alt="Post2">
<img class="post" src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FgSLCVGPMnzw5dtzxx8rE%2Finjected_t0?alt=media&token=898bd40a-1611-4e8c-836f-e55f3aac2aec" alt="Post1">
</div>
</section>
</div>
</body>
</html>