Hello Dev community,
I have been working on the Frontendmentor Social Proof Section project for over a week. I have been stuck on using Flexbox. I understand the fundamentals for using Flexbox thanks to flexbox froggy. Here is what I understand so far:
justify-content is used to position items on the main axis (horizontally).
align-items & align-self are used to position items on the cross axis(vertically)
flex-direction is used to position items in a row(horizontally) or column(vertically).
flex-wrap is used to wrap items
The are where I am struggling is HOW to position items using flex-box.
HTML Code
<main> <div class="container"> <div class="heading"> <h1> 10,000+ of our users love our products. </h1> <p> We only provide great products combined with excellent customer service. See what our satisfied customers are saying about our services. </p> </div> <div class="star-rating reviews"> <span class="stars">⭐⭐⭐⭐⭐ </span>Rated 5 Stars in Reviews </div> <div class="star-rating guru"> <span class="stars">⭐⭐⭐⭐⭐ </span>Rated 5 Stars in Report Guru </div> <div class="star-rating besttech"> <span class="stars">⭐⭐⭐⭐⭐ </span>Rated 5 Stars in BestTech </div> </div> </main> <section class="testimonials"> <div class="review-box colton"> <img src="images/image-colton.jpg" alt="colton-smith"> Colton Smith <span>Verified Buyer</span> "We needed the same printed design as the one we had ordered a week prior. Not only did they find the original order, but we also received it in time. Excellent!" </div> <div class="review-box irene"> <img src="images/image-irene.jpg" alt="irene-roberts"> Irene Roberts <span>Verified Buyer</span> "Customer service is always excellent and very quick turn around. Completely delighted with the simplicity of the purchase and the speed of delivery." </div> <div class="review-box anne"> <img src="images/image-anne.jpg" alt="anne-wallace"> Anne Wallace <span>Verified Buyer</span> "Put an order with this company and can only praise them for the very high standard. Will definitely use them again and recommend them to everyone!" </div> </section> CSS Code
body { font-size: 15px; font-family: 'Spartan', sans-serif; text-align: center; } .container { display: flex; flex-direction: row; height: 20vh; } .heading { border: 10px solid purple; flex-direction: column-reverse; justify-content: flex-start; } h1 { justify-content: flex-start; } section { display: flex; border: 5px solid paleturquoise; justify-content: right; flex-wrap: wrap; } div.review-box.colton { background-color: palevioletred; justify-content: left; align-items: flex-end; } /* h1, p { width:75%; } h1 { color: hsl(300, 43%, 22%); } p { color: hsl(300, 24%, 96%); color: hsl(303, 10%, 53%); } span { color: hsl(333, 80%, 67%); } section { padding: 10 40px; } img { border-radius: 50px; } */ /* star rating */ .star-rating { background-color: hsl(300, 24%, 96%); justify-self: flex-start; flex-wrap: wrap; border: 10px solid pink; } /* .stars { padding: 0px 20px; } .guru { justify-self: flex-end; margin-left: 50px; } .besttech { margin-left: 100px; } */ /*testimonials */ .testimonials { display: flex; padding: 0 10rem; margin: 100px; justify-content: space-between; } .review-box { background-color: hsl(300, 43%, 22%); border-radius: 10px; padding: 20px; } /* .colton { background-color: blue; } /* footer */ footer { color: black; } .attribution { font-size: 11px; text-align: center; } .attribution a { color: hsl(228, 45%, 44%); } Images of the current layout
Any feedback or tips is greatly appreciated.
Top comments (6)
Hola, novato aqui :D
Si buscas que todos las cartas se alinien horizontalmente, encierra todos los div-card
dentro de un div padre y dale a este la propiedad "display: flex;" esto activa las demas propiedades, mucha suerte.
Thank you so much. Really appreciate the advice.
De nada, si hay mas dudas mira aqui
jonmircha.com/flexbox
Thanks again!
If you just remove flex-wrap from section they will align horizontally. Also when you work with flex or grid you can use gap instead of padding. TIP: take the free course What the flexbox from Wes Bos.
Wow never heard about Wes Bos. I'll make sure to check it out. Thank you!