Immagina il seguente layout, in cui i punti rappresentano lo spazio tra le caselle:
[Left box]......[Center box]......[Right box]
Quando rimuovo la casella giusta, mi piace che la casella centrale sia ancora al centro, in questo modo:
[Left box]......[Center box].................
Lo stesso vale per rimuovere la casella a sinistra.
................[Center box].................
Ora, quando il contenuto all'interno del riquadro centrale diventa più lungo, occuperà lo spazio disponibile necessario rimanendo centrato. Le caselle sinistra e destra non si restringono mai e quindi quando non c'è spazio lasciato overflow:hidden
e text-overflow: ellipsis
entrerà in vigore per interrompere il contenuto;
[Left box][Center boxxxxxxxxxxxxx][Right box]
Tutto quanto sopra è la mia situazione ideale, ma non ho idea di come realizzare questo effetto. Perché quando creo una struttura flessibile in questo modo:
.parent {
display : flex; // flex box
justify-content : space-between; // horizontal alignment
align-content : center; // vertical alignment
}
Se la casella sinistra e destra avessero esattamente le stesse dimensioni, ottengo l'effetto desiderato. Tuttavia, quando uno dei due ha dimensioni diverse, la casella centrata non è più realmente centrata.
C'è qualcuno che mi può aiutare?
Aggiornare
A justify-self
sarebbe bello, questo sarebbe l'ideale:
.leftBox {
justify-self : flex-start;
}
.rightBox {
justify-self : flex-end;
}
justify-self
prima oggi, quindi potresti trovare questo interessante: stackoverflow.com/questions/32551291/…
flexbox
dovrebbe funzionare. Potresti provare un'altra metodologia.