Imagine o seguinte layout, onde os pontos representam o espaço entre as caixas:
[Left box]......[Center box]......[Right box]
Quando removo a caixa direita, gosto que a caixa central ainda esteja no centro, da seguinte forma:
[Left box]......[Center box].................
O mesmo vale para se eu remover a caixa esquerda.
................[Center box].................
Agora, quando o conteúdo dentro da caixa central ficar mais longo, ele ocupará o espaço disponível necessário, enquanto permanece centralizado. A caixa de esquerda e direita nunca vai encolher e, assim, quando, onde há espaço deixado o overflow:hidden
e text-overflow: ellipsis
virão em vigor para quebrar o conteúdo;
[Left box][Center boxxxxxxxxxxxxx][Right box]
Tudo acima é a minha situação ideal, mas não tenho idéia de como conseguir esse efeito. Porque quando eu crio uma estrutura flexível assim:
.parent {
display : flex; // flex box
justify-content : space-between; // horizontal alignment
align-content : center; // vertical alignment
}
Se as caixas esquerda e direita tiverem exatamente o mesmo tamanho, obtenho o efeito desejado. No entanto, quando um dos dois é de tamanho diferente, a caixa centralizada não está mais realmente centralizada.
Existe alguém que possa me ajudar?
Atualizar
A justify-self
seria bom, isso seria ideal:
.leftBox {
justify-self : flex-start;
}
.rightBox {
justify-self : flex-end;
}
justify-self
hoje mais cedo, então você pode achar isso interessante: stackoverflow.com/questions/32551291/…
flexbox
é assim que deve funcionar. Você pode tentar outra metodologia.