如何使用'flex: 0 0 25%”为 Flex 项目添加 1px 边距？

使用 flex: 0 0 25% 向 Flex 项目添加 1 像素边距

使用 Flex 布局时，可能需要添加一个小的边距，例如 1px，用于弯曲项目。然而，flexbox 本质上不允许使用小数值作为边距。

对于使用 flex: 0 0 25% 定义的 Flex 项目，直接添加 1px 边距是不可能的。这是因为 flex-basis 固定为 25%，没有留下可用的边距空间。

解决方案：

要在这种情况下实现 1px 边距，利用 flex-grow 属性：

flex: 1 0 22%;

• flex: 1：flex-grow 允许要扩展超出其指定的 flex-basis 的元素。
• 0：flex-shrink 设置为 0 以确保元素不会收缩到低于其 flex-basis。
• 22%：flex -basis 减少到 22%，以考虑每边所需的 1px 边距（2/11 = 每边 0.19%，当加起来达到 22% 时，结果为25%)。

通过减少 flex-basis 并增加 flex-grow，元素将拥有所需的边距，同时仍保持其定义的比例。

示例:

#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;
}

<div>

以上是如何使用'flex: 0 0 25%”为 Flex 项目添加 1px 边距？的详细内容。更多信息请关注PHP中文网其他相关文章！