Flexbox Horizontal List

Question

Good afternoon, everyone!

I’m looking to line up a list ul so that their li stay left and last li stay right. I’m not able to do this, someone could help me.

I could make it easier if I split this li of that ul but I wanted to keep it together.

I tried to put Justify-self directly into the last too but it did not give I tried as follows below and it didn’t work:

HTML

 <ul class="lista-menu">
    <a><li class="funcionarios">Funcionários</li></a>
    <a href="clientes.html"><li class="clientes">Clientes</li></a>
    <a href="produtos.html"><li class="produtos">Produtos</li></a>
    <a href="servicos.html"><li class="servicos">Serviços</li></a>
    <a><li class="financeiro">Financeiro</li></a>
 </ul>

CSS

.lista-menu {
display: flex;
justify-content: flex-start;
width: 100%;
border: 1px solid black;
}

.financeiro {
  justify-self: flex-end;
}

Answer 1

Your HTML has a semantic error that you need to correct, the direct child of <ul> has to be the <li> and not the <a>

Then, in CSS, using Flexbox, for you to align on eixo X a son of a flex container, is used margin and not justyfy

Note below that when placing margin-left: auto in the last son he will paste on the right of the parent container

.lista-menu {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  border: 1px solid black;
  
  padding: 0;
}

.financeiro {
  margin-left: auto;
}

<ul class="lista-menu">
  <li class="funcionarios"><a>Funcionários</a></li>
  <li class="clientes"><a href="clientes.html">Clientes</a></li>
  <li class="produtos"><a href="produtos.html">Produtos</a></li>
  <li class="servicos"><a href="servicos.html">Serviços</a></li>
  <li class="financeiro"><a>Financeiro</a></li>
</ul>