首页 > web前端 > css教程 > 如何在图片库中的 Flex 项目之间实现 1px 间距?

如何在图片库中的 Flex 项目之间实现 1px 间距?

Susan Sarandon
发布: 2024-12-24 18:44:54
原创
774 人浏览过

How to Achieve 1px Spacing Between Flex Items in an Image Gallery?

如何调整图片库 Flex 项目中的间距

在 Flexbox 布局中,Flex 值为“0 0 25%”的项目具有固定的宽度,不会收缩或增长。要在这些项目之间添加空间,同时保持网格状结构,可以应用边距。但是,应用 1% 的边距会导致间隙过大。

要实现 1 像素的边距,请使用弹性值“1 0 22%”。这会将 flex-basis 设置为 22%,确保每行只有四个项目。 flex-grow 值设置为 1,允许项目增长并填充边距留下的剩余空间。这会在项目之间创建一个微妙的 1px 间隙。

#foto-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 1 0 22%;
  min-height: 50px;
  margin: 1px;
  background-color: red;
}
登录后复制

以上是如何在图片库中的 Flex 项目之间实现 1px 间距?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板