Flex 与最后一行的间隙填充空间

Question

当我使用带间隙的 flex 时，最后一行的末尾有一些空间（我认为大小与间隙相等）： https://jsfiddle.net/Lgnzj4ya/

为什么最后一行不像第一行那样占用所有空间？ 如果我消除差距，它会这样做，但我想要项目之间的差距。 我的理解是align-items: stretch （默认）应该填满所有空间。

有趣的是，我在 JSFiddle 和我的网站上遇到了这个问题，但在 Stackoverflow 代码片段中没有：

 .flex-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }.flex-item { flex: 1; }

 <div class="flex-container"> <input class="flex-item" type="text" placeholder="First name"> <input class="flex-item" type="text" placeholder="Last name"> <input class="flex-item" type="text" placeholder="Address"> <input class="flex-item" type="text" placeholder="Email"> <input class="flex-item" type="text" placeholder="Phone"> </div>

问题图片（“电话”输入后有一个空格）：

Answer 1

Lastpass密码保管库应用程序似乎使用完全相同的input placeholder值来触发其输入自动填充选项图标的放置。

它是一个 SVG，恰好是max-width: 22px和max-height: 18px

在你的 CSS 中插入这个似乎可以解决问题，它会禁用图标，但不会禁用底层的Lastpass功能：

div[data-lastpass-icon-root] { display: none }

Lastpass的一个相当草率的开发解决方案，因为它绝不会干扰客户端 HTML 文档的常规流程。

对于感兴趣的，注入 HTML：

<div data-lastpass-icon-root="true" style="position: relative !important; height: 0px !important; width: 0px !important; float: left !important;"></div>

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" data-lastpass-icon="true" style="position: absolute; cursor: pointer; height: 18px; max-height: 18px; width: 22px; max-width: 22px; top: -40px; left: -443.667px; z-index: auto; color: rgb(215, 64, 58);"><rect x="0.680176" y="0.763062" width="22.6392" height="22.4737" rx="4" fill="currentColor"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M19.7935 7.9516C19.7935 7.64414 20.0427 7.3949 20.3502 7.3949C20.6576 7.3949 20.9069 7.64414 20.9069 7.9516V16.0487C20.9069 16.3562 20.6576 16.6054 20.3502 16.6054C20.0427 16.6054 19.7935 16.3562 19.7935 16.0487V7.9516Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.76288 13.6577C5.68525 13.6577 6.43298 12.9154 6.43298 11.9998C6.43298 11.0842 5.68525 10.3419 4.76288 10.3419C3.8405 10.3419 3.09277 11.0842 3.09277 11.9998C3.09277 12.9154 3.8405 13.6577 4.76288 13.6577Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M10.3298 13.6577C11.2521 13.6577 11.9999 12.9154 11.9999 11.9998C11.9999 11.0842 11.2521 10.3419 10.3298 10.3419C9.4074 10.3419 8.65967 11.0842 8.65967 11.9998C8.65967 12.9154 9.4074 13.6577 10.3298 13.6577Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M15.8964 13.6577C16.8188 13.6577 17.5665 12.9154 17.5665 11.9998C17.5665 11.0842 16.8188 10.3419 15.8964 10.3419C14.974 10.3419 14.2263 11.0842 14.2263 11.9998C14.2263 12.9154 14.974 13.6577 15.8964 13.6577Z" fill="white"></path></svg>