如何为flex为0：0 25％的flex项目添加1px页边距？

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在用flexbox测试几种不同的布局，但存在以下问题。

我有一个设置了弹性项目的图片库，flex:0 0 25%;我想给它们添加1px的边距，因为1％很大。所以我想知道在这种情况下该怎么办。

我附上以下示例。

#foto-container {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  justify-content: space-around;
  margin: 10px;
}
.foto {
  flex: 0 0 25%;
  min-height: 200px;
  background-color: red;
}
/*---------How I can add 1px to photo?-----------------*/
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="foto-container">
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
  <div class="foto foto4">4</div>
  <div class="foto foto5">5</div>
  <div class="foto foto6">6</div>
  <div class="foto foto7">7</div>
  <div class="foto foto8">8</div>
  <div class="foto foto9">9</div>
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
</div>

谢谢，

回答：

您可以使用flex: 1 0 22%例如。这将使您的元素定义22%为flex-basis

（因此，每行仅4个元素），并且它们将增长为填充边距剩余的剩余空间（因为flex-grow设置为1）

#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 id="foto-container">
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
  <div class="foto foto4">4</div>
  <div class="foto foto5">5</div>
  <div class="foto foto6">6</div>
  <div class="foto foto7">7</div>
  <div class="foto foto8">8</div>
  <div class="foto foto9">9</div>
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
</div>

的值flex-basis应大于(20% - margin * 2)和小于(25% - margin *

2)。第一个值将使您每行具有5个元素，因此具有更大的值将使它们变为4，而具有比第二个更大的值将使元素数量为每行3。

#foto-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 10px;
}
.foto {
  flex: 1 0 21%;
  min-height: 50px;
  margin: 1px;
  background-color: red;
  animation: change 4s linear infinite alternate;
}
@keyframes change {
  0%,40% {flex: 1 0 calc(20% - 2 * 1px);background:yellow;}
  41%,59% {background:red;}
  60%,100% {flex: 1 0 calc(25% - 2 * 1px + 1px);background:green;}
}
<div id="foto-container">
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
  <div class="foto foto4">4</div>
  <div class="foto foto5">5</div>
  <div class="foto foto6">6</div>
  <div class="foto foto7">7</div>
  <div class="foto foto8">8</div>
  <div class="foto foto9">9</div>
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
</div>

以上是 如何为flex为0：0 25％的flex项目添加1px页边距？ 的全部内容， 来源链接： utcz.com/qa/417004.html

回到顶部