0

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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Márton Stark
  • 19
  • 4

1 Answers1

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>
Nathan Dawson
  • 18,138
  • 3
  • 52
  • 58
  • HI! Thank you for the answer! I was considering this option too, but I would like to keep 1-2-3 boxes in the center. Should I create then an extra div for the right side? – Márton Stark Mar 23 '21 at 17:58