CODEWITHSUNDEEP
htmlcssflexbox
A191919
A191919

Reputation: 3442

Display flex align to right

If I am using 

display: flex;
align-items: center;

how to make horizontal align of ul to right?

.navigation {
  display: flex;
  align-items: center;
  width: 100%;
  height: 80px;
  background: rgb(255, 255, 255);
}
ul {
  list-style: none;
  /*float:right;*/
}
li {
  display: inline-block;
}
a {
  padding: 10px;
  width: 80px;
  text-decoration: none;
  display: block;
  text-align: center;
}
<div class="navigation">
  <ul>
    <li><a>Contacts</a></li>
    <li><a>About</a></li>
    <li><a>FAQ</a></li>
    <li><a>Other</a></li>
  </ul>
</div>

Upvotes: 3

Views: 277

Answers (2)

J.Joe
J.Joe

Reputation: 664

Add flex-direction: row-reverse; to .navigation

    .navigation {
        display: flex;
        align-items: center;
        width: 100%;
        height: 80px;
        background: rgb(255,255,255);
        flex-direction: row-reverse;/* Here is what you are looking for*/
    }
    ul {
        list-style:none;           
        border:1px solid black;
    }
    li {
        display:inline-block;
    }
    a {
        padding: 10px;
        width: 80px;
        text-decoration: none;
        display: block;
        text-align: center;
    }
<div class="navigation">
    <ul>
        <li><a>Contacts</a></li>
        <li><a>About</a></li>
        <li><a>FAQ</a></li>
        <li><a>Other</a></li>
    </ul>
</div>

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122027

You can do this with justify-content: flex-end on .navigation

.navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 80px;
  background: rgb(255, 255, 255);
}

ul {
  list-style: none;
  display: flex;
  padding: 0;
}

a {
  padding: 10px 25px;
  width: 80px;
  text-decoration: none;
  text-align: center;
}
<div class="navigation">
  <ul>
    <li><a>Contacts</a></li>
    <li><a>About</a></li>
    <li><a>FAQ</a></li>
    <li><a>Other</a></li>
  </ul>
</div>

Upvotes: 2

Related Questions