Представьте себе следующий макет, где точки представляют пространство между полями:
[Left box]......[Center box]......[Right box]
Когда я удаляю правую коробку, мне нравится, чтобы центральная коробка все еще была в центре, вот так:
[Left box]......[Center box].................
То же самое касается, если бы я удалил левую коробку.
................[Center box].................
Теперь, когда содержимое внутри центрального поля становится длиннее, оно занимает столько свободного места, сколько необходимо, оставаясь при этом центрированным. Левая и правая коробка никогда не будет сокращаться и , таким образом , когда , где нет места покинули overflow:hidden
и text-overflow: ellipsis
придет в действие , чтобы разорвать содержание;
[Left box][Center boxxxxxxxxxxxxx][Right box]
Все вышесказанное - моя идеальная ситуация, но я не знаю, как этого добиться. Потому что, когда я создаю гибкую структуру, вот так:
.parent {
display : flex; // flex box
justify-content : space-between; // horizontal alignment
align-content : center; // vertical alignment
}
Если левый и правый боксы будут одинакового размера, я получу желаемый эффект. Однако, когда один из двух имеет другой размер, центрированный прямоугольник больше не является центрированным.
Кто-нибудь может мне помочь?
Обновить
А justify-self
было бы неплохо, это было бы идеально:
.leftBox {
justify-self : flex-start;
}
.rightBox {
justify-self : flex-end;
}
flexbox
должно работать. Вы можете попробовать другую методологию.justify-self
ранее сегодня, поэтому вы можете найти это интересным: stackoverflow.com/questions/32551291/…Ответы:
Вот метод, использующий flexbox для центрирования среднего элемента, независимо от ширины братьев и сестер.
Ключевая особенность:
Используйте вложенные гибкие контейнеры и
auto
поля:Вот как это работает:
.container
) - это гибкий контейнер..box
элемент ) теперь является гибким элементом..box
элемент данflex: 1
для равномерного распределения пространства контейнера ( подробнее ).justify-content: center
.span
элемент представляет собой центрированный гибкий элемент.auto
поля, чтобы сместить внешниеspan
s влево и вправо.Вы также можете отказаться
justify-content
и использоватьauto
поля исключительно.Но
justify-content
может работать здесь, потому чтоauto
поля всегда имеют приоритет.источник
width
быть уточненнымwhite-space: nowrap
было последней частью головоломки, чтобы предотвратить перенос текста, когда область становится слишком маленькой.flex: 1
первый и последний из них. Это заставляет их расти одинаково, чтобы заполнить доступное пространство, оставленное средним.Однако, если первый или последний элемент имеет широкое содержимое, этот гибкий элемент также будет расти из-за нового
min-width: auto
начального значения.Примечание. Похоже, что в Chrome это реализовано неправильно. Тем не менее, вы можете установить
min-width
на-webkit-max-content
или ,-webkit-min-content
и это тоже будет работать.Только в этом случае средний элемент будет выталкиваться из центра.
источник
Вместо использования по умолчанию flexbox, использование grid решает его в 2 строки CSS без дополнительной разметки внутри дочерних элементов верхнего уровня.
HTML:
CSS:
Flexbox качается, но не должен быть ответом за все. В этом случае сетка явно самый чистый вариант.
Даже сделал кодовую ручку для вашего удовольствия от тестирования: https://codepen.io/anon/pen/mooQOV
источник
flex
для всего. Мое единственное возражение заключается в том, что вертикальное выравнивание становится проще с помощью flex (align-items: center
) в случае, если ваши элементы имеют разную высоту и должны быть выровненыВы можете сделать это так:
источник
Вот ответ, который использует сетку вместо flexbox. Это решение не требует дополнительных элементов внука в HTML, как принятый ответ. И он работает правильно, даже если содержимое на одной стороне становится достаточно длинным, чтобы перетекать в центр, в отличие от ответа сетки в 2019 году.
Единственное, что не может сделать это решение - показать многоточие или скрыть дополнительный контент в центральном окне, как описано в вопросе.
источник
Вот еще один способ сделать это, используя
display: flex
в родителей и детей:источник
Вы также можете использовать этот простой способ для достижения точного выравнивания по центру для среднего элемента:
codepen: https://codepen.io/ErAz7/pen/mdeBKLG
источник