小编Jak*_*los的帖子

如何为 Flex: 0 0 25% 的 Flex 项目添加 1px 边距?

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

html css flexbox

3
推荐指数
2
解决办法
2365
查看次数

标签 统计

css ×1

flexbox ×1

html ×1