如何使用 CSS Flex 在列之间创建空间

Question

我想在我用 css flex 构建的列之间创建空间。我不想使用填充或边距。

可能有 2 或 6 列。

如果两列，它们可以有几个宽度变化，例如

50%/50% 25%/75% 75%/25%

等

如何在不使用填充或边距的列之间引入一些空间，因为我只希望在列之间留出空间，而不是列周围的空间。

Answer 1

下面是一个没有填充或边距的示例。我在父弹性框div 上使用justify-content: space-between，并通过分别使列 20% 和 70%(总计 90%(来留出 10% 的宽度用于间距。

.flex {
border: 1px solid #000;
height: 200px;
width: 200px;

display: flex;
justify-content: space-between;
}
.column {
border: 1px solid red;
}
.col-1 {
width: 20%;
}
.col-2 {
width: 70%;
}

<div class="flex">
<div class="column col-1">20%</div>
<div class="column col-2">70%</div>
</div>

Answer 2

有了这个答案，我想通过不使用margin来展示，你错过了 Flexbox 的一个聪明行为，当 flex 项目不适合(比它们的父项宽(时，它们能够平均缩小并保持每列的比例宽度。

所以回答你的问题：我如何在不使用填充或边距的列之间引入一些空格，因为我希望列之间有空间，而不是列周围的空间

答：您添加每列之间的边距，而不是在所有边上添加边距

.container {
display: flex;
}
.container .column {
height: 150px;
border: 1px solid blue;
}
.container .column:not(:first-child) {
margin-left: 5px;                       /*  on all but the first column  */
}
.container .column:not(:last-child) {
margin-right: 5px;                      /*  on all but the last column  */
}
.container .column:nth-child(1),
.container .column:nth-child(2) {
flex-basis: 50%;
}
.container .column:nth-child(3),
.container .column:nth-child(6) {
flex-basis: 25%;
}
.container .column:nth-child(4),
.container .column:nth-child(5) {
flex-basis: 75%;
}

<div class="container">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>