Center last row element using Flexbox - css

Question

When I resize the window to smaller resolution I would like the last element to be centered. I know that I can achive that by setting parent's justify-content parameter to space-around or center, but it has to be set to: space-between.
ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background: rgba(255, 0, 0, 0.3);
padding: 0;
}
li {
list-style-type: none;
display: inline-block;
min-width: 100px;
height: 100px;
background: red;
margin: 10px;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
http://jsfiddle.net/k7fzdn80/

Answer 1

use auto margin
margin: 10px auto;
is this what you expect?
Solution

Answer 2

Unfortunately, it is not possible with flexbox for your problem. But I have a CSS hack to solve the issue. Target the last element within the media-query. I have used custom breakpoints below.
ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background: rgba(255, 0, 0, 0.3);
padding: 0;
}
li {
list-style-type: none;
display: inline-block;
min-width: 100px;
height: 100px;
background: red;
margin: 10px;
}
#media (min-width: 376px) and (max-width: 494px) {
li:last-child {
margin: 10px auto;
}
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Answer 3

It's not possible. space-between definition says
If [...] there is only a single flex item on the line, this value
is identical to 'flex-start'.
The only way would be doing the alignment manually, e.g. with media queries and auto margins. But then the layout won't be flexible at all.

Answer 4

I have another proposal. Using the calc() to calculate the width of the flex item. And so the last element could be centered.
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 100%;
row-gap: 10px;
}
.column {
display: flex;
width: calc(100% / 4);
overflow: hidden;
text-align: center;
background: green;
}
.inside-column {
background: white;
width: 100%;
display: block;
margin: 15px;
border: 5px solid red;
}
.wrap {
max-width: 350px;
background: #CCC;
}
<div class="container">
<div class="column">
<a href="#" class="inside-column">
1
<br>Content Content Content
</a>
</div>
<div class="column">
<div class="inside-column">
2
<br>Content Content Content
</div>
</div>
<div class="column">
<div class="inside-column">
3
</div>
</div>
<div class="column">
<div class="inside-column">
4
<br>Content Content Content
</div>
</div>
<div class="column">
<div class="inside-column">
5
<br>Content Content Content
</div>
</div>
<div class="column">
<div class="inside-column">
6
</div>
</div>
<div class="column">
<div class="inside-column">
7
</div>
</div>
<div class="column">
<div class="inside-column">
8
</div>
</div>
<div class="column">
<div class="inside-column">
9
</div>
</div>
</div>
<br>
<br>
<div class="wrap">
<div class="container">
<div class="column">
<a href="#" class="inside-column">
1
<br>Content Content Content
</a>
</div>
<div class="column">
<div class="inside-column">
2
<br>Content Content Content
</div>
</div>
<div class="column">
<div class="inside-column">
3
</div>
</div>
<div class="column">
<div class="inside-column">
4
<br>Content Content Content
</div>
</div>
<div class="column">
<div class="inside-column">
5
</div>
</div>
<div class="column">
<div class="inside-column">
6
</div>
</div>
<div class="column">
<div class="inside-column">
7
</div>
</div>
<div class="column">
<div class="inside-column">
8
</div>
</div>
<div class="column">
<div class="inside-column">
9
</div>
</div>
</div>
</div>