文章/答案/技术大牛

发布

社区首页 >问答首页 >带有边距间隔的CSS Flexbox导致不必要的项目扩展

问带有边距间隔的CSS Flexbox导致不必要的项目扩展
EN

Stack Overflow用户

提问于 2022-09-28 06:28:09

回答 2查看 38关注 0票数 0

我有个柔韧的盒子。有4个圆圈，其宽度为父元素的25%。我增加了项目之间的空白，但现在由于我的填充%，圆圈“拉伸”。我想保持填充作为%，以保持一个纵横比，我需要。但是，当我添加边距以创建项目之间的间隔时，就会拉伸。

.items {
  display: flex;
  flex-wrap: wrap;
}

.items>* {
  flex: 1;
  flex-basis: 25%;
}

.items>*:after {
  content: '';
  display: block;
  background: #000;
  margin: 5px;
  padding-bottom: 100%;
  border-radius: 50%;
}

<div class="items">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

我想要的形状，但不是间距：

我想要的间距，但不是形状：

另外，我使用边距的原因是在元素周围都有相等的间距--在有几行元素的情况下。

我如何得到我想要的间隔和形状？

html

css

flexbox

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-09-28 06:55:49

为什么不从:after伪元素中删除边距，并在主元素上使用填充呢？(还在主要元素上添加了方框大小)：

.items {
  display: flex;
  flex-wrap: wrap;
}

.items>* {
  flex: 1;
  flex-basis: 25%;
  padding: 5px;
  box-sizing: border-box;
}

.items>*:after {
  content: '';
  display: block;
  background: #000;
  padding-bottom: 100%;
  border-radius: 100%;
}

<div class="items">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

票数 1

Stack Overflow用户

发布于 2022-09-28 06:38:49

在flex元素中插入一个gap，然后删除伪元素(::after)的填充和边距，然后使用aspect-ratio

.items {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
}

.items > * {
  flex: 1;
  flex-basis: 25%;
}

.items > *::after {
  content: '';
  display: block;
  background: #000;
  aspect-ratio: 1;
  border-radius: 50%;
}

<div class="items">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73877059

复制

相似问题

问带有边距间隔的CSS Flexbox导致不必要的项目扩展
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有边距间隔的CSS Flexbox导致不必要的项目扩展EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有边距间隔的CSS Flexbox导致不必要的项目扩展
EN