How can I align the last element of a flexbox to the right with taking into account space-around?

Question

I have a flex-div with 7 elements in it.


    
        [...]
    
    [6 more identical divs]

On large screens, there are 3 divs in each row, on medium screens 2 and on small screens only 1. The last element is always centered but I want it to be aligned right. I tried margin-left: auto on the last element but due to justify-content-around there should be space on the right (first 2 rows on large screens, first 3 rows on medium screens). Unfortunately, margin-left: auto pushes the last element all the way to the right without the space from justify-content-around. How can I position the last element exactly as if it was an element of the right column?

.d-flex {
  display: flex
}

.flex-wrap {
  flex-wrap: wrap
}

.justify-content-around {
  justify-content: space-around
}

.card {
  border: 1px solid rgba(0, 0, 0, .125)
}

.ml-auto {
  margin-left: auto
}


  Without margin-left: auto


  
    1
  
  
    2
  
  
    3
  
  
    4
  
  
    5
  
  
    6
  
  
    7 is centered
  


  With margin-left: auto


  
    1
  
  
    2
  
  
    3
  
  
    4
  
  
    5
  
  
    6
  
  
    7 is too far to the right

user_18811917 · Answer

It goes from

For 7 to come under 6 is tricky, but lets say thats not what you meant, and just want to align the 7 to left side.

Let's start removing all these style=width, If you ever want to edit the width of div you would need to edit every single div, dumping it into the CSS is much more efficient.

This is the adjusted CSS

.flex-wrap {
  flex-wrap: wrap;
}

.justify-content-around {
  justify-content: space-between;
  display: flex;
}

.card {
  border: 1px solid rgba(0, 0, 0, 0.125);
  width: 200px;
}

If you want it aligned on the right then you can use JS but its difficult, since you use justify it might conflict.

user_6038249 · Answer

The following solution works, if the element and the parent width are constant, i. e. you know, when there are 1 or 2 or 3 columns:

.d-flex {
  display: flex
}

.flex-wrap {
  flex-wrap: wrap
}

.justify-content-around {
  justify-content: space-around
}

.card {
  width: 200px
}

.ml-auto {
  margin-left: auto
}

.d-none {
  display: none
}

.border {
  border: 1px solid rgba(0, 0, 0, .125);
}

@media (min-width:500px) {
  .d-lg-flex {
    display: flex
  }
}

@media (min-width:700px) {
  .d-xl-flex {
    display: flex
  }
}


  Centered


  
    1
  
  
    2
  
  
    3
  
  
    4
  
  
    5
  
  
    6
  
  
    7 is centered
  



  With margin-left: auto


  
    1
  
  
    2
  
  
    3
  
  
    4
  
  
    5
  
  
    6
  
  
    7 is too far to the right
  



  Correct position


  
    1
  
  
    2
  
  
    3
  
  
    4
  
  
    5
  
  
    6
  
  
  
  
    7 is now at correct position

Instead of min-width:500px and min-width:700px in the media queries, use the bootstrap ones: min-width:992px and min-width:1200px. I just needed the smaller values for the snippet. Or simply use

and for the placeholder-divs.

user_14862885 · Answer

While other answers here are better, You should be tricky and smart,

you can create another element ,say div 8,now

Change
8 to
Place this div before div 7

What have we done?

We have removed all content inside that div(removed 8 from it)
We have changed class card to space, this removes the border property we apply in css(We can even remove the class instead of changing)

.card {
  border: 1px solid rgba(0, 0, 0, .125);/*removed to our element 8*/
}

Your code

Note: I have added just 1 line of code,in html

.d-flex {
  display: flex
}

.flex-wrap {
  flex-wrap: wrap
}

.justify-content-around {
  justify-content: space-around
}

.card {
  border: 1px solid rgba(0, 0, 0, .125)
}


  Without margin-left: auto


  
    1
  
  
    2
  
  
    3
  
  
    4
  
  
    5
  
  
    6
  
  

  
    7

user_14862885 · Answer

As of your original question,
"but due to justify-content-around",
You get problem when using margin-left: auto because of, justify-content- around.
The solution is to use justify-content-space-between

Snippet:

.d-flex {
  display: flex
}

.flex-wrap {
  flex-wrap: wrap
}

.justify-content-around {
  justify-content: space-between;
  margin: auto;
}

.card {
  border: 1px solid rgba(0, 0, 0, .125)
}

.card:last-child{
  margin-left: auto
}

Note: If you need space-around also,then use margin or fixed width,or even another parent div to make it center!

How can I align the last element of a flexbox to the right with taking into account space-around?

4 Answers

What have we done?

Your code

Snippet: