修改＆＃34;周围的空间＆＃34;宽度？

Question

我无法理解proty内容属性的空间，在flexbox中，看看这个小笔来说明：

https://codepen.io/Ziratsu/pen/gewEPO

我希望两个div在同一条线上但是有一定距离，周围的空间给我带来的好处，但是如果我想在这两个div之间添加更多的空间？如果我想缩小它怎么办？

我已经搜索并尝试向我的div添加一些ID并更改边距或填充，但它无效。

HTML

 <div class=conteneur1>
  <div class="sub"></div>
  <div class="sub"></div> 
</div>

CSS

.conteneur1 {
  display: flex;
  justify-content: space-around;
}
.sub{
  border-style: solid;
  background: pink;
  width: 50px;
  height: 50px;
 }

我希望你能得到我的问题，我的意思是不按照我的意愿改变它们之间的宽度是令人沮丧的，我希望有可能，如果不是互联网上的每一页都看起来与空间相同周围。

Answer 1

您可以使用保证金来增加/减少它们之间的大小

body {
  background: gray;
}

.conteneur1 {
  display: flex;
  justify-content: space-around;
}

.sub {
  border-style: solid;
  background: pink;
  width: 50px;
  height: 50px;
}

<div class=conteneur1>
  <div class="sub"></div>
  <div class="sub"></div>
</div>

<div class=conteneur1>
  <div class="sub" style="margin-right:30px;"></div>
  <div class="sub" style="margin-left:30px;"></div>
</div>
<div class=conteneur1>
  <div class="sub" style="margin-right:-30px;"></div>
  <div class="sub" style="margin-left:-30px;"></div>
</div>

另一个想法是在它们之间使用隐藏元素来控制距离：

body {
  background: gray;
}

.conteneur1 {
  display: flex;
  justify-content: center;
}
.conteneur1:before {
  content:"";
  width:var(--s, 100px);
}

.sub {
  border-style: solid;
  background: pink;
  width: 50px;
  height: 50px;
}
.sub:first-child {
  order:-1;
}
.sub:last-child {
  order:2;
}

<div class=conteneur1>
  <div class="sub"></div>
  <div class="sub"></div>
</div>

<div class=conteneur1 style="--s:50px;">
  <div class="sub" ></div>
  <div class="sub"></div>
</div>
<div class=conteneur1 style="--s:150px;">
  <div class="sub"></div>
  <div class="sub"></div>
</div>

或者您可以使用两侧的两个隐藏元素来控制距离：

body {
  background: gray;
}

.conteneur1 {
  display: flex;
}
.conteneur1:before,.conteneur1:after {
  content:"";
  width:var(--s, 100px);
}

.sub {
  border-style: solid;
  background: pink;
  width: 50px;
  height: 50px;
}
.sub:first-child {
  margin-right:auto;
}
.sub:last-child {
  margin-left:auto;
}

<div class=conteneur1>
  <div class="sub"></div>
  <div class="sub"></div>
</div>

<div class=conteneur1 style="--s:50px;">
  <div class="sub" ></div>
  <div class="sub"></div>
</div>
<div class=conteneur1 style="--s:150px;">
  <div class="sub"></div>
  <div class="sub"></div>
</div>