html - Flex 工具栏环绕，同时粘在左侧/右侧

Question

我正在设计一个工具栏，该工具栏根据宽度环绕并分为两半，最外面的元素粘在各自的一侧:

容器设置了justify-content: flex-end。随着它变窄，最后的元素被包裹起来，但按预期坚持到最后:

Spacer 只是一个 margin: 0 auto 元素。

然而，一旦左边的一项被包裹起来，其余的就会突然跳到右边:

有什么办法可以防止这种跳跃吗？

Plunkr:https://plnkr.co/edit/XNJeoSqDMe8DtgWj7KfZ?p=preview

Answer 1

因为您在容器上 flex 了末端，所以我看不出如何让它保持在左侧。

您可以使用媒体查询。将 flex-end 更改为开始，但随后全部左对齐。

另一种解决方案是让它增长到满容器。在小屏幕上

.toolbar > * {
flex-grow:1
}

抱歉，不能提供更多帮助。