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

Question

У меня есть код на https://codepen.io/osmanof-the-vuer/pen/ZErPezX.

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 134px;
  height: 150px;
  background: #ccc;
}

.item {
  background: #abc;
  height: 20px;
  padding: 10px;
  margin: 5px;
}

<div class="wrapper">
  <div class="item">Hello</div>
  <div class="item">world</div>
  <div class="item">my</div>
  <div class="item">dear</div>
  <div class="item">friends</div>
</div>

На текущий момент блоки располагаются так:

Я бы хотел, чтобы было что-то подобное:

То есть, чтобы изменялась ширина крайних блоков. Спасибо!

Answer 1

Могу предложить такой вариант:

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 5px;
  row-gap: 5px;
  padding: 5px;
  box-sizing: border-box;
  width: 134px;
  height: 150px;
  background: #ccc;
}

.item {
  background: #abc;
  height: 20px;
  padding: 10px; 
  flex-grow: 2;
  text-align: center;
}

<div class="wrapper">
  <div class="item">Hello</div>
  <div class="item">world</div>
  <div class="item">my</div>
  <div class="item">dear</div>
  <div class="item">friends</div>
</div>

БЛОГ НА HUSL

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

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