我正在使用 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?-----------------*/Run Code Online (Sandbox Code Playgroud)
<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> …Run Code Online (Sandbox Code Playgroud)