如何实现容器内元素按比例和间距平均分布？

css 容器布局问题？

在询问如何实现按指定比例和间距在容器中平均显示元素之前，文章简要概述了遇到的问题和所需的效果。

问题描述

如何实现一个随父容器宽度自适应的高度自适应容器，其中嵌套的元素宽度百分比固定，间距也固定，且在不同宽度下保持平均分布？

问题解答

以25%的宽度和1rem的间距为例，问题的关键在于计算元素宽度：

元素宽度 = (外部宽度 - 间隙) / 项数

登录后复制

具体来说，宽度可以设置为：

width: calc((100% - 1rem * 5) / 4)

登录后复制

此外，需要添加 margin-left: 1rem 以保持间距。

替代方法

使用 padding 代替 margin

为了避免在内部元素上使用 margin，可以在外部容器上使用 padding，如下所示：

.rxc-container {
  padding: 1rem;
}

.item {
  width: calc((100% - 1rem * 3) / 4);
  margin-right: 1rem;
  margin-bottom: 1rem;
}

登录后复制

使用网格布局 (grid)

网格布局提供了一种更简便的方法：

.item {
  height: 100px;
  border: 1px solid;
}

.rxc-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 1rem;
}

登录后复制

使用网格布局，元素将自动根据分配的列数和间距平均分布。

以上就是如何实现容器内元素按比例和间距平均分布？的详细内容，更多请关注抖狐科技其它相关文章！