css - 根据 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>