Css 如何控制Flex Box之间的空间？

我正在试验css属性flexbox来制作流体网格。我注意到当我在之间使用

空格时，空格不一致。它们先宽后窄。如何在flexbox中使排水沟等于1rem

我试着用
calc
减少1rem。这只会阻止排水沟变得比1rem窄，但允许它开始时比1rem宽

我还可以尝试其他技术吗

我的代码：


正文{
字体大小：16px；
}
.bg-blc-2{
背景色：rgba（0,0,0,0.2）；
}
.txt中心{
文本对齐：居中；
}
.cls-1，
.cls-2，
.cls-3，
.cls-4，
.cls-5，
.cls-6，
.cls-7，
.cls-8，
.cls-9，
.cls-10，
.cls-11，
.cls-12{
显示器：flex；
柔性包装：包装；
弯曲方向：行；
证明内容：之间的空间；
保证金：0.01雷姆0；
}
.cls-1>*{
弹性：1；
}
.cls-2>*{
弹性基础：计算（50%-1勒姆）；
}
.cls-3>*{
弹性基础：calc（33.33%-1rem）；
}
.cls-4>*{
弹性基础：计算（25%-1勒姆）；
}
.cls-5>*{
弹性基础：计算（20%-1勒姆）；
}
.cls-6>*{
弹性基准：calc（16.6667%-1rem）；
}
.cls-7>*{
弹性基础：计算（14.28%-1勒姆）；
}
.cls-8>*{
弹性基础：计算（12.5%-1勒姆）；
}
.cls-9>*{
弹性基础：calc（11.11%-1rem）；
}
.cls-10>*{
弹性基础：计算（10%-1勒姆）；
}
.cls-11>*{
弹性基础：计算（9.09%-1勒姆）；
}
.cls-12>*{
弹性基础：calc（8.33%-1rem）；
}

1.
1.
2.
1.
2.
3.
1.
2.
3.
4.
1.
2.
3.
4.
5.
1.
2.
3.
4.
5.
6.
1.
2.
3.
4.
5.
6.
7.
1.
2.
3.
4.
5.
6.
7.
8.
1.
2.
3.
4.
5.
6.
7.
8.
9
1.
2.
3.
4.
5.
6.
7.
8.
9
10
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
更新

这里有一个备选方案：

这是一个在整个布局中有一个柔性柱的版本

使用rem有其优点，但与flexbox一样，由于某些要求或情况，它仍然需要其他属性的帮助

本文涵盖了一个我认为与您的项目相关的主题


相关CSS

html, body {
    box-sizing: border-box;
    font-size: 16px;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    border: 0;
}
.fcol-0 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-between;
    align-items: space-between;
    width: 100%;
    height: 100%;
} 
div.bdr-lt {
    border-left: 0;
}
div.bdr-rt {
    border-right: 0;
}
div[class^="cls"] {
    border-top: 8px solid blue;
    border-bottom: 8px solid blue;
}


看看这个：
我想你希望盒子之间有一个恒定的1rem，对吗

使用
框大小：边框框
将强制使用公共框模式。即使应用了
边框框
，Flexbox也不包括边框。直到现在我才真正知道那是为了什么。如果flexbox没有忽略边界，那么就无法在flex容器中使用常量度量。我不知道为什么rem会变化，并且像em一样。rem应该保持不变，因为根的字体大小不变。这就是我使用8px作为边框的原因，因为您希望框之间保持恒定的1rem距离（1rem=：root font size=16px/2（每个框）=8px）

顺便说一句，我看到你为body声明了16px。如果你的意图是设置1rem=16px，那么它应该是
html{font-size:16px；}
。我没有麻烦，因为它是所有浏览器的默认设置

相关变化：

body {
    box-sizing: border-box;
}
div[class^="bg"] {
    border-left: 8px solid red;
    border-right: 8px solid red;
}


正文{
框大小：边框框；
字体大小：16px；
}
.bg-blc-2{
背景色：rgba（0,0,0,0.2）；
}
.txt中心{
文本对齐：居中；
}
.cls-1、.cls-2、.cls-3、.cls-4、.cls-5、.cls-6、.cls-7、.cls-8、.cls-9、.cls-10、.cls-11、.cls-12{
显示器：flex；
柔性包装：nowrap；
弯曲方向：行；
证明内容：之间的空间；
边距：0 0 1rem 0
}
div[class^=“bg”]{
左边框：8px实心红色；
右边框：8px实心红色；
}
.cls-1>*{
弹性：1；
}
.cls-2>*{
弹性：0.1 calc（50%）；
}
.cls-3>*{
弹性：0.1 calc（33.33%）；
}
.cls-4>*{
弹性：0.1 calc（25%）；
}
.cls-5>*{
弹性：0.1 calc（20%）；
}
.cls-6>*{
弹性：0.1 calc（16.6667%）；
}
.cls-7>*{
弹性：0.1 calc（14.28%）；
}
.cls-8>*{
弹性：0.1 calc（12.5%）；
}
.cls-9>*{
弹性：0.1 calc（11.11%）；
}
.cls-10>*{
弹性：0.1 calc（10%）；
}
.cls-11>*{
弹性：0.1 calc（9.09%）；
}
.cls-12>*{
弹性：0.1 calc（8.33%）；
}

1.
1.
2.
1.
2.
3.
1.
2.
3.
4.
1.
2.
3.
4.
5.
1.
2.
3.
4.
5.
6.
1.
2.
3.
4.
5.
6.
7.
1.
2.
3.
4.
5.
6.
7.
8.
1.
2.
3.
4.
5.
6.
7.
8.
9
1.
2.
3.
4.
5.
6.
7.
8.
9
10
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
除了您添加了一个红色边框之外，我看不到任何区别。2列的水槽仍然比12列的行更宽。此外，当使用速记时，calc在其他据称支持flexbox的浏览器中无法正常工作（coughs IE）.Flex basis必须使用。抱歉，没有正确更新。我想你可以将每个
的缩写替换为
Flex grow:0
，
Flex shrink:1
。cls*
？即使我不做速记，我也看不出有什么区别。将边框更新为8px；每个边框在不同的视口中的间距为16px。看起来b之间的间距为常数16pxoxes，如果您不喜欢.cls*左右两侧的空间，我想我也可以解决这个问题。