我正在使用 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>
Thanks,
您可以使用flex: 1 0 22%例如。这将允许您的元素由以下方式定义22% as 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
