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.