justify-self not moving flex item [duplicate] - css

Question

This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Center one and right/left align other flexbox element
(11 answers)
Closed 1 year ago.
I would like to ask for a little help. I have the following code, and I would like to move to the right the number "4" box. I tried with "justify-self" but it doesn't move at all.
What would be the reason of that?
ul {
display: flex;
flex-direction: row;
justify-content: center;
background-color: pink;
}
li {
padding: 20px;
margin: 30px;
background-color: grey;
list-style-type: none;
}
.rightBox {
justify-self: flex-end;
}
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="rightBox">4</li>
</ul>
</div>

Answer 1

justify-self doesn't apply to to flexbox. You can however use margin auto to push that last element to the right.
Keep in mind that previously your total margin between elements would be 60px. If the width of your container could shrink, you might want to double up the right margin on the adjacent element to preserve the total space.
Example:
ul {
display: flex;
flex-direction: row;
justify-content: center;
background-color: pink;
}
li {
padding: 20px;
margin: 30px;
background-color: grey;
list-style-type: none;
}
.rightBox {
margin-left: auto;
}
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="rightBox">4</li>
</ul>
</div>