Question

我有一组具有以下css属性的图像作为图块：对于父母

.poster-container > div {
                display: flex;
                flex-direction:row;
                flex-wrap: wrap;
            }

以及弹性商品：

.poster-item {
                flex: 1 0 10%;
                margin: 30px;
                height: auto;
                text-align:center;
                overflow: hidden;
                position:relative;
                cursor: pointer;
            }

我已将其限制为最多只能连续显示6个图块。但是，当最后一行中的图块少于6个时，弯曲的项目会拉伸以采用相等的宽度。如何限制图块在整个宽度上延伸，以使其在其他行中显示为图块？

Answer 1

flex: 1 0 10%;，这意味着成长，不要缩水，并且拥有10％的基数。请参阅此处的说明，您还将找到解决问题的示例。

Answer 2

将flex-grow: 0设置为不增长，所以flex: 0 0 16.666667%（100/6％）

.wrapper {
  display: flex;
  border: 1px solid black;
}

.wrapper div {
  border: 1px solid blue;
  height: 30px;
  flex: 0 0 100px;
}

<div class="wrapper">
  <div></div>
  <div></div>
  <div></div>
</div>

防止弹性物品占据剩余宽度

2 个答案: