With flexbox, center list aligning items on the left

Question

I’m using Bootstrap 4 as documentation (https://getbootstrap.com/docs/4.0/utilities/flex/).

Using the class Justify-content-center I have the following result:

My div is with the classes: d-flex flex-wrap Justify-content-center

I would like these smaller items to be centered on the page, however, that their last line be aligned to the left, this way:

Is it possible? I accept suggestions in another way to get the same result, even if you don’t use Flexbox. I need the solution to be "responsive", being able to serve for any size and amount of elements.

Answer 1

I believe you’ll achieve this by grouping divs within a div-mother and using the events resize and load (to adjust on page loading) of jQuery to set a width on this div of the exact size until the maximum of divs .item within it.

You don’t have to touch anything in your original code, just create a div with a id any (placed id="items") and group, see:

$(window).on("load resize", function(){
   var content = $(".content.d-flex").width();
   var items = $(".item").outerWidth(true);

   var items_width = Math.floor(content / items);
   
   $("#items").css({
      'max-width':items_width*items+'px'
   });
});

.content {
  max-width: 500px;
  margin: 0 auto;
  border: 1px solid black;
  margin-bottom: 50px;
}

.item {
  width: 100px;
  height: 100px;
  margin: 2px;
  background: gray;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="content d-flex flex-wrap justify-content-center">
   <div id="items">
      <div class='item'></div>
      <div class='item'></div>
      <div class='item'></div>
      <div class='item'></div>
      <div class='item'></div>
      <div class='item'></div>
      <div class='item'></div>
   </div>
</div>