A191919 A191919 - 6 months ago 13
HTML Question

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>




Answer

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>

Comments