отзывчивые элементы с точки зрения ширины в div

Question

Как я могу сделать элементы внутри контейнера отзывчивыми?Контейнер может содержать не более 3 предметов, а количество предметов неизвестно.Под отзывчивостью я подразумеваю, что ширина элемента изменяется при изменении размера контейнера div, и я думаю, возможно, ширина элемента - это процентное значение.Кроме того, ширина элемента имеет максимальную ширину.Это достижимо просто css?

<div class="container">
    <div *ngFor="let item of items, let i=index" class="item">
        {{item}}
    </div>
</div>

.container {
  display: flex;
}

.item {
  //width: 33.3%; I was thinking something like this, but when there is only 
 // one item, the item width will become very small
 max-width: 180px;
}

Answer 1

Используйте flexbox очень просто

div{
 display:flex;
}

span{
  flex:1;
  height:50px;
  border:1px solid green;
}

@media screen and (max-width: 767px){
  div{
    flex-direction:column
  }
}

<div>
  <span></span>
</div>

<div>
  <span></span>
  <span></span>
</div>

<div>
  <span></span>
  <span></span>
  <span></span>
</div>

Answer 2

Ваш CSS должен быть

.container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

И в вашем шаблоне вы должны установить стиль на

<div class="container">
    <div *ngFor="let item of items, let i=index" class="item" style="flex-basis: {{100 / items.length}}%">
        {{item}}
    </div>
</div>

Но это еще не изменяемый размер.Если вы хотите добиться этого, вам нужен JavaScript.