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

你的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。

Answer 2

使用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>

div 中宽度的响应项目

responsive items in terms of width in a div

css

responsive

angular