Представьте себе следующий макет, где точки представляют пространство между полями:
[Left box]......[Center box]......[Right box]
Когда я удаляю правый квадрат, мне нравится, что центральная коробка все еще находится в центре, например:
[Left box]......[Center box].................
То же самое происходит, если я удалю левое поле.
................[Center box].................
Теперь, когда содержимое в центральном окне становится больше, оно будет занимать столько свободного места, сколько необходимо, оставаясь центрированным. Левое и правое поле никогда не сжимаются, и, таким образом, когда не осталось места, то overflow:hidden и text-overflow: ellipsis будут действовать, чтобы сломать содержимое;
[Left box][Center boxxxxxxxxxxxxx][Right box]
Все вышеизложенное - моя идеальная ситуация, но я понятия не имею, как добиться этого эффекта. Потому что, когда я создаю структуру flex, например:
.parent {
display : flex; // flex box
justify-content : space-between; // horizontal alignment
align-content : center; // vertical alignment
}
Если левое и правое поле будут одинакового размера, я получаю желаемый эффект. Однако, когда один из двух отличается от другого размера, центрированная коробка больше не центрируется.
Есть ли кто-нибудь, кто может мне помочь?
Обновление
A justify-self было бы неплохо, это было бы идеально:
.leftBox {
justify-self : flex-start;
}
.rightBox {
justify-self : flex-end;
}