如何使用 Flex 减少 DIV 中的空间答案

【问题标题】：How to Reduce Space in DIV using Using Flex如何使用 Flex 减少 DIV 中的空间
【发布时间】：2020-07-18 23:02:57
【问题描述】：

在这个 Fiddle 中，如何减少单个内容（1、2、3、4）与其边框之间的空间。我对 Flexbox 有点陌生，我不知道是否有一个简单的解决方法。

这就是我的意思（更具体地说）

对

谢谢

JS 小提琴：https://jsfiddle.net/Ragingfury/0nrq94jt/2/

.a{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-flow:row wrap;
  text-align:center;
}
.b{
flex:40%;
margin:20px;
border:1px solid blue;
}

<div class="a">

  <div class="b">
    1
  </div>
  <div class="b">
    2
  </div>
  <div class="b">
    3
  </div>
  <div class="b">
    4
  </div>

</div>

【问题讨论】：

从.b中删除margin: 20px;
@AlwaysHelping 我重新编辑了帖子
我不确定你想要什么？这些图像根本没有帮助。你想减少每个 div 的宽度 .b
没错，但是将 width:50% 设置为每个 .b 没有任何作用。
也不改变元素的内边距

标签： html css flexbox spacing

【解决方案1】：

您可以使用space-evenly 并在.b 上设置一些宽度，而不是flex:40%

我希望这就是你想要的。

这是工作小提琴：https://jsfiddle.net/9xd2hna5/

.first,
.second {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-flow: row wrap;
  text-align: center;
}

.b {
  width: 15em;
  margin: 1em;
  border: 1px solid blue;
}

<div class="a">

  <div class="first">
    <div class="b">
      1
    </div>
    <div class="b">
      2
    </div>
  </div>

  <div class="second">

    <div class="b">
      3
    </div>
    <div class="b">
      4
    </div>
  </div>

</div>

【讨论】：

非常感谢，这正是我想要的！
@BobStewart 很高兴听到这个消息。您是否介意接受我的answer 作为解决方案并投票，谢谢。
没问题！感谢您的帮助

【解决方案2】：

不确定您是否要求这样做，但如果您想减少 (1,2,3,4) 之间的空间，请尝试调整 b(i,e.b) 类中的边距属性。

例如，如果您将边距设置为小于当前值，那么它将减少 (1,2,3,4) 之间的空间。

同样，如果你想减少它的边框，只需将边框 1px 纯蓝色设置为不太像边框 0.5 纯蓝色。

如果你想减少盒子内的空间。我的意思是边框和框内项目之间的空间，然后使用 b 类中的 padding 属性，即 .b.

希望这对您有所帮助。如果您有任何问题，请提出。

愉快的编码。 :-)

【讨论】：

感谢您的帮助，这就是我的意思：ibb.co/z73dJ4m 与 ibb.co/pzwhVB5 项目仍然均匀分布，只是没有在屏幕上拉伸太多