如何使用 Using Flex 在 DIV 中减少 Space

Question

在这个 Fiddle 中，如何减少单个内容（1、2、3、4）及其边框之间的 space。我是 Flexbox 的新手，我不知道是否有简单的解决方法。

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

对比

谢谢

JS Fiddle: 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>

Answer 1

不确定你是否要求这个，但如果你想在 (1,2,3,4) 之间减少 space，那么，尝试调整 class 中的边距属性 b(i,e.b).

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

同样，如果你想减少它的边框，只需将 border 1px solid blue 设置为不太像 border 0.5 solid blue 的东西。

如果您想减少方框内的 space。我的意思是 space 在边框和框内的项目之间，然后在 class b 中使用 padding 属性即 .b.

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

编码愉快。 :-)

Answer 2

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

希望这就是你想要的。

这里正在工作fiddle：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>

如何使用 Using Flex 在 DIV 中减少 Space

How to Reduce Space in DIV using Using Flex

html

css

spacing

flexbox