繁体   English   中英

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

[英]Flex with gap fill space in last row

当我使用带间隙的 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>

问题图片(“电话”输入后有一个空格): 在此处输入图像描述

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

它是一个 SVG,恰好是max-width: 22pxmax-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>
①如果本文未解决您的问题,请点击查看与本文相关的问题
②如果本文未解决您的问题,请向程序员专用AI小助手提问
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM