Question

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

可能有2到6列。

如果两列可以有多个宽度变化，例如

50％/ 50％ 25％/ 75％ 75％/ 25％

等

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

Answer 1

这是一个没有填充或边距的示例。我在父Flexbox 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的一个聪明的行为中错过了什么，当灵活项目不合适时（宽于他们的父项），它们能够平均收缩并保持每列的比例宽度。

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

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

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

如何使用css flex在列之间创建空间

2 个答案: