2

Tenho o seguinte menu:

body {
  padding: 1rem;
}

.menu {
  display: flex;
  padding: 0.5rem;
  border: solid 1px #000;
}

.item {
  border: solid 1px #444;
  padding: 0.25rem;
}

.item:not(:last-child) {
  margin-right: 0.25rem;
}
<div class="menu">
  <span class="item">Esquerda 1</span>
  <span class="item right">Direita 1</span>
  <span class="item">Esquerda 2</span>
  <span class="item">Esquerda 3</span>
  <span class="item right">Direita 2</span>
</div>

Como faço para que, usando flexbox, todos os elementos que possuam a classe "right" alinhem-se à direita mantendo os elementos sem essa classe à esquerda? Também preciso que o espaço restante fique entre todos os elementos da direita e esquerda. Assim:

PS: Não desejo criar dois wrappers adicionais para separar os elementos. Quero saber se é possível separá-los somente com CSS e usando a estrutura HTML mencionada.

2 Respostas 2

1

Vc pode usar a propriedade order nos filho de um flex container, depois só no primeiro elemento com a classe .right vc coloca margin-left:auto, ele vai "empurrar" todos os outros elementos com a classe .right para o final do container

body {
  padding: 1rem;
}

.menu {
  display: flex;
  padding: 0.5rem;
  border: solid 1px #000;
}

.item {
  border: solid 1px #444;
  padding: 0.25rem;
}

.item:not(:last-child) {
  margin-right: 0.25rem;
}

.right {
  order: 2;
}
.right.primeiro {
  margin-left: auto;
}
<div class="menu">
  <span class="item">Esquerda 1</span>
  <span class="item right primeiro">Direita 1</span>
  <span class="item">Esquerda 2</span>
  <span class="item">Esquerda 3</span>
  <span class="item right">Direita 2</span>
</div>

7
  • Legal, Hugo! Obrigado pela resposta. Mas existe algum jeito de chegar nisso sem adicionar a classe primeiro? Commented 21/05/2019 às 19:19
  • @LuizFelipe tem, mas para mim é pode ser gambiarra rss... vc pode criar um span vazio como último item do menu, e nele vc coloca flex-grow: 1; Se te interessa eu edito a pergunta com esse modelo
    – hugocsl
    Commented 21/05/2019 às 19:22
  • 1
    @LuizFelipe uma dica, talvez com diplay Grid no lugar do display Flex, seja possível fazer sem precisar do Span vazio ou da classe extra Primeiro
    – hugocsl
    Commented 21/05/2019 às 19:29
  • 1
    @LuizFelipe um detalhe, se vc sabe que o segundo item sempre vai ter a classe .right vc pode usar esse CSS, ai não precisa da classe .primeiro. .item:nth-child(2) { margin-left: auto; }
    – hugocsl
    Commented 21/05/2019 às 19:32
  • 1
    @LuizFelipe as vezes isso pode te interessar pt.stackoverflow.com/questions/380734/…
    – hugocsl
    Commented 21/05/2019 às 19:37
0

Poderia colocar margin-left: auto apenas no segundo elemento .item e order: 1 na classe .right. Isso fará com que os elementos da classe .right se alinhem à direita fazendo com que o segundo filho .item tenha uma margem à esquerda automática do último elemento que só tenha a classe .item:

body {
  padding: 1rem;
}

.menu {
  display: flex;
  xflex-direction: row;
  padding: 0.5rem;
  border: solid 1px #000;
}

.item {
  border: solid 1px #444;
  padding: 0.25rem;
}

.item:not(:last-child) {
  margin-right: 0.25rem;
}

.item:nth-child(2){
   margin-left: auto;
}

.right{
   order: 1;
}
<div class="menu">
  <span class="item">Esquerda 1</span>
  <span class="item right">Direita 1</span>
  <span class="item">Esquerda 2</span>
  <span class="item">Esquerda 3</span>
  <span class="item right">Direita 2</span>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .