相关疑难解决方法(0)

我的问题是我希望flexbox具有可变范围宽度,并且一切正常,但不是最后一行.我希望所有孩子都有相同的维度,即使行没有孩子(最后一行).

#products-list {
    position:relative;
    display: flex;
    flex-flow: row wrap;
    width:100%;
}

#products-list .product {
    min-width:150px;
    max-width:250px;
    margin:10px 10px 20px 10px;
    flex:1;
}

在JSFiddle示例中,我创建了一个动态情境.

我的flex div可以缩小到150px并且长到250px,但所有都必须具有相同的大小(显然我想要一个CSS解决方案,JS我知道的方式).

我的网站上的移动菜单底部有一个基于 flex 的社交媒体图标的无序列表。

我试图让三排并排坐着，等距。我已经用规则管理了这个

justify-content:space-around

但我的问题是，当项目超过三个时，下一行开始从中心填充，而我希望它从左侧填充，因为用户会随着时间的推移添加更多图标。

我解释得越深入，我就越不确定这是否可能，但我想我会把它扔在那里以防万一。

是否可以使下一行中的列表项从容器的左侧开始而不会弄乱justify-content:space-around规则？

目前他们只有在两排都有三个时才排队。

这是代码

justify-content:space-around

.box {
  width:275px;
  height:275px;
  background-color:yellow;
}

ul { 
  width:auto;
  display:flex;
  flex-direction:row;
  justify-content:space-around;
  flex-wrap: wrap;
  padding: 30px 20px 30px 20px;
  list-style: none; 
}

li {
  width:30px;
  height:30px;
  margin:15px;
  background-color:red;
}