Flexbox - 如何在元素之间设置相等的空间答案

【问题标题】：Flexbox - how to set equal spaces between elementsFlexbox - 如何在元素之间设置相等的空间
【发布时间】：2021-06-13 03:07:07
【问题描述】：

我在使用 Flexbox 时有不同寻常的方法，它是“12 列”设计，一切正常，例外是 flex 元素之间的空间，它们在包裹和对齐时看起来不同。如何解决这个问题？

我玩margin，但没有帮助：

margin: 1% 1% 1% 1%;         ???????

https://jsfiddle.net/cmpt/j7tk30bx/7/

更新：

这个Flexbox的思路如下：

如果有一个大屏幕“桌面/pad”，即最小屏幕宽度 841px - 在 12 列不同宽度的系统中执行 FLEX，对于其余的“移动/小屏幕”，即屏幕宽度

这很好用，对于网页设计和将元素放置在任何你想要的地方都非常灵活。

但问题在于 FLEXBOX 元素（ROW 和 COL 包装器）之间的边距（空格）在这两种模式下是不同的，并且 CSS 边距参数 top/bottom 例如在这两种模式下以不同的方式调整视图。我希望两种模式下的 FLEXBOX 元素之间的空格相等。

注意：

margin: x 1% x 1%

拥有完美的12列系统是一个严格的规则即

.col_12 {width: 98%;}

1%+1%+98%=100%

但我不知道如何处理 x（顶部/底部）边距

body {
  background-color: #998;
}

.row {
  margin: 0;
  padding: 0;
}

[class*="col_"] {
  border-radius: 4px;
  background-color: #eed;
  margin: 1% 1% 1% 1%;
  padding: 0em 0% 0em 0%;
}

@media all and (min-width: 841px) {
  .row {
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .col_1 {width: 6.3%;}
  .col_2 {width: 15.0%;}
  .col_3 {width: 23.0%;}
  .col_4 {width: 31.3%;}
  .col_5 {width: 40.0%;}
  .col_6 {width: 48.0%;}
  .col_7 {width: 56.3%;}
  .col_8 {width: 65.0%;}
  .col_9 {width: 73.0%;}
  .col_10 {width: 81.3%;}
  .col_11 {width: 90.0%;}
  .col_12 {width: 98%;}

  [class*="col_"] {
    flex: 0 auto;
  }
}


<div class="row">
  <div class="col_11">col_11</div>
  <div class="col_1">col_1</div>
</div>

<div class="row">
  <div class="col_2">col_2</div>
</div>

<div class="row">
  <div class="col_12">col_12</div>
</div>

清理了...小提琴也更新了

【问题讨论】：

是的，我知道 css 技巧和前缀，但不管怎样，主题呢？
那么你应该清理它，这样我们就不必筛选几十行过时的代码了。向您的志愿者表示一点尊重。
嗨！我认为您在 jsfiddle 中的 CSS 无效。此外，还不清楚你想要输出什么。当谈到元素之间的空间时，你想要没有空间吗？你想让垂直空间和水平空间一样吗？
不一定，我希望无论行是否换行，空间都相同，例如桌面和移动屏幕。
Mmmh 删除 @media all and (min-width: 841px) { 时会破坏 css，元素之间的空间在所有元素之间似乎相同。对不起，但我真的看不出你在哪里看到不同的空间。您在 jsfiddle 中的 HTML/CSS 是否真的显示了您遇到的这个问题？

标签： flexbox element margin

【解决方案1】：

更新-修复！！！

我已修复它：@media 部分底部“自动”的边距有帮助。在其他地方，我们表示固定边距（本例中为 20px），必须以 px 为单位，而不是 %。看起来棒极了……小巧可靠的 FLEXBOX……谢谢！

[class*="col_"] {
margin: 20px 1% 20% 1%; 
}
...

@media all and (min-width: 841px) {
...
[class*="col_"] {
...
margin: 20px 1% auto 1%; 
...
}
...
}

https://jsfiddle.net/cmpt/j7tk30bx/

【讨论】：