Как сделать уменьшение блоков , при добавлении новых?

Question

У меня есть блок wrapper , он шириной 1000px, как сделать так , чтобы при добавлении нового элемента li в список , блоки смогли уменьшится ?

.wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   position: absolute;
   width: 1000px;
   border: 1px solid black;
   left: calc(50% - #{get-vh(1000px)}/2);
}

.wrapper-block {
   display: flex;
   text-align: center;
   justify-content: center;
   align-items: center;
   margin-right: 20px;
   padding: 4px 4px;
   background: rgba(0, 0, 0, 0.4);
   border-radius: 8px;
   height: 30px;
}

<ul class="wrapper">
        <li class="wrapper-block">
           textqweqweqweqweweq
        </li>
        <li class="wrapper-block">
         textqwe1312
         </li>
         <li class="wrapper-block">
            textqwe
         </li>
         <li class="wrapper-block">
            textqweqweeqw
         </li>
         <li class="wrapper-block">
            textqwe123qwr
         </li>
         <li class="wrapper-block">
            textqweqweqwre
         </li>
         <li class="wrapper-block">
            textqwe123123
         </li>
         <li class="wrapper-block">
            textqwe123123
         </li>
      </ul>

Answer 1

Сразу скажу, нужно учитывать, что бесконечно что-то сжиматься не может, у всего есть предел - чем-то придется жертвовать, в какие-то рамки вписываться. В данном случае я разрешил перенос букв чтобы эффект сжатия блоков был наиболее заметен и вообще возможен. Каждый раз я добавляю по 1 блоку.

.wrapper {
   display: flex;
   width: 1000px;
   height: 30px;
   justify-content: space-between;
   padding-left: 0; /* убираем отступ ul */
   gap: .3em; /* расстояние между элементами */
   border: 1px solid black;
}

.wrapper-block {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-basis: 200px; /* задаем минимальную ширину */
   padding: 4px;
   text-align: center;
   font-size: .7em; /* уменьшаем шрифт */
   word-break: break-all; /*позволяем перенос букв*/
   background: rgba(0, 0, 0, 0.4);
   border-radius: 8px;
}

<body>
<ul class="wrapper">
  <li class="wrapper-block">
     textqweqweqweqweweq
  </li>
  <li class="wrapper-block">
   textqwe1312
   </li>
   <li class="wrapper-block">
      textqwe
   </li>
   <li class="wrapper-block">
      textqweqweeqw
   </li>
   <li class="wrapper-block">
      textqwe123qwr
   </li>
   <li class="wrapper-block">
      textqweqweqwre
   </li>
   <li class="wrapper-block">
      textqwe123123
   </li>
   <li class="wrapper-block">
      textqwe123123
   </li>
</ul>

<ul class="wrapper">
  <li class="wrapper-block">
     textqweqweqweqweweq
  </li>
  <li class="wrapper-block">
   textqwe1312
   </li>
   <li class="wrapper-block">
      textqwe
   </li>
   <li class="wrapper-block">
      textqweqweeqw
   </li>
   <li class="wrapper-block">
      textqwe123qwr
   </li>
   <li class="wrapper-block">
      textqweqweqwre
   </li>
   <li class="wrapper-block">
      textqwe123123
   </li>
   <li class="wrapper-block">
      textqwe123123
   </li>
   <li class="wrapper-block">
      textqwe123123
   </li>
</ul>

<ul class="wrapper">
  <li class="wrapper-block">
     textqweqweqweqweweq
  </li>
  <li class="wrapper-block">
   textqwe1312
   </li>
   <li class="wrapper-block">
      textqwe
   </li>
   <li class="wrapper-block">
      textqweqweeqw
   </li>
   <li class="wrapper-block">
      textqwe123qwr
   </li>
   <li class="wrapper-block">
      textqweqweqwre
   </li>
   <li class="wrapper-block">
      textqwe123123
   </li>
   <li class="wrapper-block">
      textqwe123123
   </li>
   <li class="wrapper-block">
      textqwe123123
   </li>
   <li class="wrapper-block">
      textqwe123123
   </li>
</ul>

<ul class="wrapper">
  <li class="wrapper-block">
     textqweqweqweqweweq
  </li>
  <li class="wrapper-block">
   textqwe1312
   </li>
   <li class="wrapper-block">
      textqwe
   </li>
   <li class="wrapper-block">
      textqweqweeqw
   </li>
   <li class="wrapper-block">
      textqwe123qwr
   </li>
   <li class="wrapper-block">
      textqweqweqwre
   </li>
   <li class="wrapper-block">
      textqwe123123
   </li>
   <li class="wrapper-block">
      textqwe123123
   </li>
   <li class="wrapper-block">
      textqwe123123
   </li>
   <li class="wrapper-block">
      textqwe123123
   </li>
   <li class="wrapper-block">
      textqwe123123
   </li>
</ul>

<ul class="wrapper">
  <li class="wrapper-block">
     textqweqweqweqweweq
  </li>
  <li class="wrapper-block">
   textqwe1312
   </li>
   <li class="wrapper-block">
      textqwe
   </li>
   <li class="wrapper-block">
      textqweqweeqw
   </li>
   <li class="wrapper-block">
      textqwe123qwr
   </li>
   <li class="wrapper-block">
      textqweqweqwre
   </li>
   <li class="wrapper-block">
      textqwe123123
   </li>
   <li class="wrapper-block">
      textqwe123123
   </li>
   <li class="wrapper-block">
      textqwe123123
   </li>
   <li class="wrapper-block">
      textqwe123123
   </li>
   <li class="wrapper-block">
      textqwe123123
   </li>
   <li class="wrapper-block">
      textqwe123123
   </li>
</ul>

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

БЛОГ НА HUSL

Как сделать уменьшение блоков , при добавлении новых?

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