Flex wrap с эласти c для детей

Question

У меня есть элемент списка, который расширяется при наведении, ожидается, что этот элемент редко будет отображаться в одиночку, и их будет достаточно, чтобы он был перенесен на несколько строк.

проблема поднимает голову, когда наведенный элемент является последним элементом в строке перед переносом строки.

, как вы можете видеть, когда элемент расширяется при наведении курсора он начинает автоматически оборачиваться, и в этом заключается моя проблема.

.tag div {
  visibility: hidden;
  width: 0;
  opacity: 1;
}
.tag:hover div {
  visibility: visible;
  width: 61px;
  opacity: 1;
}

Я ищу решение CSS, но если согласится, что только JS может помочь, тогда я с готовностью уступлю.

Ура!

Answer 1

Предполагая, что увеличенная ширина (вызванная наведением) всегда меньше ширины исходного элемента (до наведения), мы можем просто настроить его контейнер для добавления отступов. Имея этот отступ, контейнерный элемент может гарантировать, что вышеописанное поведение (то есть перенос элемента на следующую строку из-за добавленной ширины) не произойдет. Значение этого дополнительного отступа является точным значением увеличенного значения ширины. Добавленные отступы удаляются при наведении чипа (таким образом, позволяя ему красиво расширяться) и добавляются обратно, когда наведение чипа отсутствует. Это прекрасно работает, чтобы гарантировать, что расширение всегда может происходить без переноса элемента на следующую строку.

Работая на контейнере шириной 1567px, я попробовал приведенный ниже код, и он прекрасно работает. Попробуйте отключить код JS и отрегулируйте поля так, чтобы последний элемент (chip) в первой строке переносился во второй ряд при наведении курсора. Затем попробуйте снова включить код JS. Вот код:

const hoverWidthIncrease = (() => {
  let aChip = document.querySelector('.chip')
  let aChipExpand = aChip.querySelector('.chip--buttons')
  let beforeExpandWidth = aChip.getBoundingClientRect().width
  let afterExpandWidth
  
  aChipExpand.style.display = 'inline' // Or whatever display it has
  afterExpandWidth = aChip.getBoundingClientRect().width
  aChipExpand.style.display = ''
  return afterExpandWidth - beforeExpandWidth
})()
const container = document.querySelector('.container')
const chips = document.querySelectorAll('.chip')

container.style.paddingRight = `${hoverWidthIncrease}px`
chips.forEach(chip => {
  chip.addEventListener('mouseover', e => {
    container.style.paddingRight = '0px'
  })
  
  chip.addEventListener('mouseout', e => {
    container.style.paddingRight = `${hoverWidthIncrease}px`
  })
})

body {
  font-family: sans-serif;
  font-size: .75rem;  
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.chip {
  border-radius: 30px;
  margin: 10px;
  padding: 15px;
  background-color: #08112e;
  color: white;
}

.chip--buttons {
  color: #FFDDDDEE;
  display: none;
}

.chip:hover .chip--buttons {
  display: inline;
}

<div class = "container">
  <div class = "chip">Tag Name asd <span class = "chip--buttons">Expand</span></div>
  <div class = "chip">Tag Name wefasd <span class = "chip--buttons">Expand</span></div>
  <div class = "chip">Tag Name asdfwew <span class = "chip--buttons">Expand</span></div>
  <div class = "chip">Tag Name asdf <span class = "chip--buttons">Expand</span></div>
  <div class = "chip">Tag Name asdfg <span class = "chip--buttons">Expand</span></div>
  <div class = "chip">Tag Name asdgcxz <span class = "chip--buttons">Expand</span></div>
  <div class = "chip">Tag Name jgh <span class = "chip--buttons">Expand</span></div>
  <div class = "chip">Tag Name ert <span class = "chip--buttons">Expand</span></div>
  <div class = "chip">Tag Name fghk <span class = "chip--buttons">Expand</span></div>
  <div class = "chip">Tag Name vbnm <span class = "chip--buttons">Expand</span></div>
  <div class = "chip">Tag Name vbnmg <span class = "chip--buttons">Expand</span></div>
</div>

Answer 2

Самое простое решение: поместите кнопки в абсолютное положение относительно вашего контейнера тегов, и они могут быть видны там или видны при наведении курсора. Это может потребовать дополнительных дополнений для размещения кнопок в правом верхнем углу

Таким образом, будут происходить следующие вещи:

1. Ваш контейнер не будет расширяться, поэтому упаковка останется на месте.
2. Ваши кнопки отображаются при наведении на них
3. UX будет увеличен и не будет препятствовать

Более сложное решение: поместите ваш контейнер тегов в абсолютный родительский контейнер, когда он наведен. Выдвиньте тег и разверните его поверх существующих тегов. Заполните это пространство пробелом, чтобы другие теги не переносили пустое пространство.

Этот метод более сложный и довольно уродливый. Другой полу-простой метод - это предварительно занять пространство кнопок с отступом или полем и компенсировать его при наведении курсора на кнопку. В любом случае структура встроенных тегов изменится, чтобы сделать ее более доступной.