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

Question

我正在用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>

谢谢，

Answer 1

您可以使用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>