如何以最后一行左对齐的方式显示包装弹性项目？

Question

我有一个固定宽度的容器,其中几个可变宽度元素必须出现在一行中,必要时可以将其溢出到其他行中.

但是,每个元素的开头必须与它上面的元素对齐,所以在ASCII艺术中它看起来像是这样(比如,填充1):

    /----------------------------------\
    |                                  |
    | # One    # Two   # Three  # Four |
    | # Five   # Six                   |
    |                                  |
    \----------------------------------/

换一种说法:

• 每行的第一个元素必须左对齐
• 每行的最后一个元素(最后一行除外)必须是右对齐的
• 每个元素必须与其上方的元素左对齐

我试图使用flexbox而没有成功.

这是我到目前为止最好的,flex-wrap: wrap用于容器和flex-grow: 1元素.

问题是最后一行填充到边缘.

justify-content: flex-start; // this does nothing

如果我拿走flow-grow: 1那么元素不会平均分配.我也尝试摆弄last-of-type元素,但这还不够.

这是否可能flexbox,或者我是以错误的方式进行的？

Answer 1

在尝试了这里的建议(谢谢!)并长时间在网上搜索之后,我得出结论,这对于flexbox来说根本不可能.无论如何,我的意思是其他人已经达成了这个结论,而我却顽固地试图让它继续工作,直到最后放弃并接受聪明人的智慧.

我遇到的一些链接可能会更好地解释它,或者需求的不同方面,所以我将它们发布在这里以供...后代使用.

如何保持包装的flex-items与前一行的元素宽度相同？

http://fourkitchens.com/blog/article/responsive-multi-column-lists-flexbox

Answer 2

使用 flexbox 没有简单的方法可以做到这一点。但是如果你愿意牺牲 IE 那么你可以用 css 来做grid，把它添加到容器中：

display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

如果你想在元素之间有一些空间然后添加

grid-gap: 10px;

Answer 3

我知道我来晚了，但是过去一个小时左右，我一直在寻找解决方案，我想我已经想通了。将空div放在容器的末端，然后设置flex-grow: 1为容器，仅此而已。还要justify-content: space-between放在容器上，不要flex-grow在其他物品上使用。这将始终使最后一行左对齐，因为该div将延伸通过所有剩余空间。

但是，这样做的问题是，它总是使最后一行左对齐-即使它是唯一一行，这也使该解决方案对我不可用，但对于可能期望多于一行项目的人来说，它可能是可用的。