Как расположить блок меток с различной длиной контента внутри

Question

Верстал тут сайт по макету из figma.. Есть такой вот блок, в принципе все очень легко, но вот возникли проблемы с частью "All Tags". Нужно, что бы этот блок прижимался к контейнеру размером 300 пикселей слева и справа. border radius: 28px., f-sz: 14px. Прикинул несколько вариантов, но сделать по макету не вышло. Даже идей нет, как это сделать ровно как на изображении...

Answer 1

div {
  width: 14em;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  text-align: center;
}

span {
  flex: 1 0 auto;
  padding: .5em;
  border: 1px solid;
  border-radius: 100vmax;
}

<div>
  <span>Business</span>
  <span>Experience</span>
  <span>Screen</span>
  <span>Technology</span>
  <span>Marketing</span>
  <span>Life</span>
</div>

БЛОГ НА HUSL

Как расположить блок меток с различной длиной контента внутри

Ответы (1 шт):