Сохраняйте средний элемент по центру, если боковые элементы имеют разную ширину. ⇐ CSS

[Anonymous]

Представьте следующее макет, где точки обозначают пространство между блоками:

[Left box]......

......[Right box]


Когда я удаляю правый блок, мне нравится, чтобы центральный блок оставался в центре, вот так:

[Left box]......

.................


То же самое произойдет, если я удалю левый квадрат.

................

.................


Теперь, когда содержимое центрального поля становится длиннее, оно будет занимать столько свободного места, сколько необходимо, оставаясь при этом по центру. Левое и правое поле никогда не будут сжиматься, и поэтому, когда не останется места, вступят в силу overflow:hidden и text-overflow: ellipsis, чтобы разбить содержимое;

[Left box]

[Right box]


Все вышеперечисленное — моя идеальная ситуация, но я понятия не имею, как добиться такого эффекта. Потому что когда я создаю такую ​​гибкую структуру:

.parent {
display : flex; // flex box
justify-content : space-between; // horizontal alignment
align-content : center; // vertical alignment
}


Если левое и правое поле будут одинакового размера, я получу желаемый эффект. Однако, когда один из двух размеров имеет другой размер, центрированный блок больше не центрируется по-настоящему.

Кто-нибудь может мне помочь?

Обновить

Обоснование было бы неплохо, это было бы идеально:

.leftBox {
justify-self : flex-start;
}

.rightBox {
justify-self : flex-end;
}


Подробнее здесь: https://stackoverflow.com/questions/323 ... ent-widths