小编典典

将弹性项目定位到最后一行或特定行

html

我的问题是我希望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;
}

我的flex div可以缩小到150像素,最大可以增长到250像素,但是所有像素都必须具有相同的大小(很明显,我想要CSS解决方案,我知道用JS)。


阅读 295

收藏
2020-05-10

共1个答案

小编典典

不幸的是,在当前的flexbox迭代(级别1)中,没有干净的方法来解决最后一行的对齐问题。这是一个普遍的问题。

具有以下行为的flex属性将很有用:

  • last-row
  • last-column
  • only-child-in-a-row
  • alone-in-a-column
2020-05-10