Flexbox Help
Tags: beginners, css, html, flexbox
Published: 2022-02-13 22:02:16

Hello Dev community,
I have been working on the Frontendmentor [Social Proof Section](https://www.frontendmentor.io/challenges/social-proof-section-6e0qTv_bA) project for over a week. I have been stuck on using Flexbox. I understand the fundamentals for using Flexbox thanks to [flexbox froggy](https://flexboxfroggy.com/). 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

![Top of the web page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxjqy4r7lyw0zdxkw4p2.png)


![Remaining part of webpage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zkr8vko9v8skr7qnro7.png)

Any feedback or tips is greatly appreciated.