html - Flexbox |通过动态调整大小的柔韧性框获得“间隔”效果

我想在我的Flex框上使用值“ space-between”获得“ justify-content”和“ align-items”的效果，但由于flexbox没有静态宽度/高度，因此无法使用它们。我不能使用边距，因为它在所有方面都增加了空间。我只希望弹性项目会合的侧面有空间。

最终，我的目标是使弹性框内容的最左侧和最右侧与上方的分隔线对齐，但项目之间要留有一定的空间。我该怎么做？

将会添加/删除更多的flex项，因此我不能让它受到限制以限制对以下问题的3个支持。

div {
  text-align: center;
  border: 1px solid black;
}

#container {
  display: flex;
  flex-wrap: wrap;
}

#container div {
  flex: 1 1 300px;
  margin: 5px;
}

<div>Flex item sides should align with this division's sides</div>
<br>
<div id="container">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

最佳答案

为了确保只有或多或少的2种方法，其中一种使用边距或边框，而另一种使用包装器来补偿间隙

堆栈片段

div {
  text-align: center;
  border: 1px solid black;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  border: none;
  margin: -5px 0 0 -5px;      /*  compensate for the gap  */
}

#container .wrapper div {
  flex: 1 1 300px;
  margin: 5px 0 0 5px;        /*  5px between  */
}

#container2 .wrapper div {
  flex: 1 1 100px;
  margin: 5px 0 0 5px;        /*  5px between  */
}

<div>Flex item sides should align with this division's sides</div>
<br>
<div id="container">
  <div class="wrapper">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
    <div>Box 4</div>
  </div>
</div>

<br>
<div id="container2">
  <div class="wrapper">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
    <div>Box 4</div>
    <div>Box 5</div>
    <div>Box 6</div>
    <div>Box 7</div>
    <div>Box 8</div>
  </div>
</div>

关于html - Flexbox |通过动态调整大小的柔韧性框获得“间隔”效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48656204/