How to align items to right using flexbox?

Question

I have a structure like so:

<footer>
    <ul>
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">link 3</a></li>
    </ul>
</footer>

With floats, you could float: left the <li> elements and then float: right the <ul> to have the links in a row and the entire list at the "end" or the very right of the containing <footer>.

How would you accomplish this with flexbox, keeping the container <footer> element?

Answer 1

You can use justify-content: flex-end

Below is necessary CSS:

footer ul {
  justify-content: flex-end;
  display: flex;
}

footer ul {
  justify-content: flex-end;
  list-style: none;
  display: flex;
}
footer ul li {
  padding: 0 10px;
}

<footer>
  <ul>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
  </ul>
</footer>

Answer 2

Check the code below. You can use justify-content: flex-end; so that the flex content will align to the right

footer ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
}

<footer>
  <ul>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
  </ul>
</footer>