CODEWITHSUNDEEP
cssflexboxalignmentcss-float
user1087973
user1087973

Reputation: 1128

How to align items to right using flexbox?

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?

Upvotes: 12

Views: 33770

Answers (3)

bellabelle
bellabelle

Reputation: 926

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>

Upvotes: 23

Mohammad Usman
Mohammad Usman

Reputation: 39342

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>

Upvotes: 11

Awsme Sandy
Awsme Sandy

Reputation: 1408

For this you can use below property

ul{
  flex-direction: flex-end;
  display: flex;
}

Upvotes: -4

Related Questions