0

i Have a flexbox with three containers on the top text line of a card. I can't get the middle item to center (evenly centered down the center line of the extents of the card).

Here's a picture of what I'm getting: Picture of cards

Here is the flexbox section of the css (with some commented out previous attempts I keep tinkering with)

.review-card-flex {
  display: flex;
  // justify-items: center;
  justify-content: center;
  // justify-content: space-between;
  // align-content: center;
  // flex-wrap: wrap;

  & > .review-box1 { // avatar
    order: 1;
    justify-self: flex-start;
    flex-basis: auto;
    margin-right: auto;
  }

  & > .review-box2 { // product info
    order: 2;
    flex-basis: auto;
    justify-self: center;
    // margin: 0px auto;
  }

  & > .review-box3 { //date
    order: 3;
    justify-self: flex-end;
    flex-basis: auto;
    margin-left: auto;
  }

  
}

Here is the HTML (its a ruby-rails view erb)

<h1 class="centered-header">Our Reviews</h1>

<div class="reviews-container">
  <% if @reviews.any? %>

      <div class="reviews-ul">
        <% @reviews.each do |review| %>
          <div class="review-card">
            <div class="review-card-flex">
              <div class="review-box1">
                <% _user = @users.find_by(id: review.user_id) %>
                  <% if _user.avatar_pic.attached? %>
                    <%= image_tag _user.avatar_pic, class:"avatar-tiny", alt: 'User Avatar'  %>
                    <% else %>
                      <%= image_tag 'generc_profile_pic.webp', class:"avatar-tiny", alt: 'Avatar Not Found ' %>
                  <% end %>
                <%= link_to review.author, review_path(id: review, product_id: review.product_id) %>
              </div>
              <div class="review-box2">
                <% _product = @products.find_by(id: review.product_id) %>
                <%= link_to _product.name, product_path(_product) %>
                <%= ' from ' %>
                <%= _product.country %>
              </div>
              <div class="review-box3">
                <p>On <%= review.created_at.strftime('%m-%d-%Y') %></p>
              </div>
            </div>
            <div class="review-stars">  
              <div class="stars" style="--rating: <%= review.rating %>;" aria-label="Rating of this review is " <%= review.rating %> " out of 5."></div>
            </div>
            <div class="review-index-text">
              <%= review.content_body  %>
              <div></div>
              <% if _product.product_photo.attached? %>
                <%= image_tag _product.product_photo, class:"product-image-tiny", alt: 'Product Image'  %>
                <% else %>
                  <%= image_tag 'image_not_available.webp', class:"card-image-not-found", alt: 'Image Not Found' %>
              <% end %>
            </div>
          </div> 
        <% end %>
      </div>

  <% else %>
    <p>There are no reviews yet.</p>
  <% end %>
</div>
<div class="pagination">
  <%= will_paginate @reviews%>
</div>
Drew Peterson 7671
  • 33
  • 5
  • I'm not totally sure if this is the problem, but it looks like you have `justify-self: center;` but I think you're looking for `align-self: center;` https://developer.mozilla.org/en-US/docs/Web/CSS/align-self – WTFranklin Apr 16 '21 at 19:04
  • 2
    what if you add a static width to your review boxes? Now they align differently because of different sizes as they are sized to their content. And then just do justify-content: space-between on the parent. – Pauline Apr 16 '21 at 19:08
  • You know, I tried align-self: center, but then it moves in the y-axis, not in the x-axis. Is something else running interference? – Drew Peterson 7671 Apr 16 '21 at 19:13
  • Your absolutely right Pauline, Its the odd widths for sure. I was thinking flex-basis: auto might do that, due to its description. But you're right, I should look to width: 100% and that fixed it right up with space between!!!! Thank You!!!! – Drew Peterson 7671 Apr 16 '21 at 19:21

0 Answers0