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

Question

我正在尝试使用css属性flexbox来制作流体网格。我注意到当我使用space-between时，空格不一致。他们开始广泛然后变得更窄。如何在Flexbox中使排水沟等于1rem？

我尝试使用calc来减少1rem。这只能阻止排水沟比1rem更窄，但允许它从1rem开始更宽。

我可以尝试其他任何技术吗？

我的代码：

body {
  font-size: 16px;
}
.bg-blc-2 {
  background-color: rgba(0, 0, 0, 0.2);
}
.txt-ctr {
  text-align: center;
}
.cls-1,
.cls-2,
.cls-3,
.cls-4,
.cls-5,
.cls-6,
.cls-7,
.cls-8,
.cls-9,
.cls-10,
.cls-11,
.cls-12 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 0 1rem 0;
}
.cls-1 > * {
  flex: 1;
}
.cls-2 > * {
  flex-basis: calc(50% - 1rem);
}
.cls-3 > * {
  flex-basis: calc(33.33% - 1rem);
}
.cls-4 > * {
  flex-basis: calc(25% - 1rem);
}
.cls-5 > * {
  flex-basis: calc(20% - 1rem);
}
.cls-6 > * {
  flex-basis: calc(16.6667% - 1rem);
}
.cls-7 > * {
  flex-basis: calc(14.28% - 1rem);
}
.cls-8 > * {
  flex-basis: calc(12.5% - 1rem);
}
.cls-9 > * {
  flex-basis: calc(11.11% - 1rem);
}
.cls-10 > * {
  flex-basis: calc(10% - 1rem);
}
.cls-11 > * {
  flex-basis: calc(9.09% - 1rem);
}
.cls-12 > * {
  flex-basis: calc(8.33% - 1rem);
}

<div class="cls-1">
  <div class="bg-blc-2 txt-ctr">1</div>
</div>
<div class="cls-2">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
</div>
<div class="cls-3">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
  <div class="bg-blc-2 txt-ctr">3</div>
</div>
<div class="cls-4">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
  <div class="bg-blc-2 txt-ctr">3</div>
  <div class="bg-blc-2 txt-ctr">4</div>
</div>
<div class="cls-5">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
  <div class="bg-blc-2 txt-ctr">3</div>
  <div class="bg-blc-2 txt-ctr">4</div>
  <div class="bg-blc-2 txt-ctr">5</div>
</div>
<div class="cls-6">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
  <div class="bg-blc-2 txt-ctr">3</div>
  <div class="bg-blc-2 txt-ctr">4</div>
  <div class="bg-blc-2 txt-ctr">5</div>
  <div class="bg-blc-2 txt-ctr">6</div>
</div>
<div class="cls-7">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
  <div class="bg-blc-2 txt-ctr">3</div>
  <div class="bg-blc-2 txt-ctr">4</div>
  <div class="bg-blc-2 txt-ctr">5</div>
  <div class="bg-blc-2 txt-ctr">6</div>
  <div class="bg-blc-2 txt-ctr">7</div>
</div>
<div class="cls-8">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
  <div class="bg-blc-2 txt-ctr">3</div>
  <div class="bg-blc-2 txt-ctr">4</div>
  <div class="bg-blc-2 txt-ctr">5</div>
  <div class="bg-blc-2 txt-ctr">6</div>
  <div class="bg-blc-2 txt-ctr">7</div>
  <div class="bg-blc-2 txt-ctr">8</div>
</div>
<div class="cls-9">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
  <div class="bg-blc-2 txt-ctr">3</div>
  <div class="bg-blc-2 txt-ctr">4</div>
  <div class="bg-blc-2 txt-ctr">5</div>
  <div class="bg-blc-2 txt-ctr">6</div>
  <div class="bg-blc-2 txt-ctr">7</div>
  <div class="bg-blc-2 txt-ctr">8</div>
  <div class="bg-blc-2 txt-ctr">9</div>
</div>
<div class="cls-10">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
  <div class="bg-blc-2 txt-ctr">3</div>
  <div class="bg-blc-2 txt-ctr">4</div>
  <div class="bg-blc-2 txt-ctr">5</div>
  <div class="bg-blc-2 txt-ctr">6</div>
  <div class="bg-blc-2 txt-ctr">7</div>
  <div class="bg-blc-2 txt-ctr">8</div>
  <div class="bg-blc-2 txt-ctr">9</div>
  <div class="bg-blc-2 txt-ctr">10</div>
</div>
<div class="cls-11">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
  <div class="bg-blc-2 txt-ctr">3</div>
  <div class="bg-blc-2 txt-ctr">4</div>
  <div class="bg-blc-2 txt-ctr">5</div>
  <div class="bg-blc-2 txt-ctr">6</div>
  <div class="bg-blc-2 txt-ctr">7</div>
  <div class="bg-blc-2 txt-ctr">8</div>
  <div class="bg-blc-2 txt-ctr">9</div>
  <div class="bg-blc-2 txt-ctr">10</div>
  <div class="bg-blc-2 txt-ctr">11</div>
</div>
<div class="cls-12">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
  <div class="bg-blc-2 txt-ctr">3</div>
  <div class="bg-blc-2 txt-ctr">4</div>
  <div class="bg-blc-2 txt-ctr">5</div>
  <div class="bg-blc-2 txt-ctr">6</div>
  <div class="bg-blc-2 txt-ctr">7</div>
  <div class="bg-blc-2 txt-ctr">8</div>
  <div class="bg-blc-2 txt-ctr">9</div>
  <div class="bg-blc-2 txt-ctr">10</div>
  <div class="bg-blc-2 txt-ctr">11</div>
  <div class="bg-blc-2 txt-ctr">12</div>
</div>

以下是示例问题：http://jsfiddle.net/xz4rbrgc/

Answer 1

<强>更新

这是替代方案：https://jsfiddle.net/zer00ne/x30boe1a/

这是一个包含整个布局的flex列的版本。

使用rem有它的优点但是像flexbox一样，由于某些要求或环境，它仍然需要其他属性的一些帮助。

本文介绍了我认为与您的项目相关的主题。

https://css-tricks.com/rems-ems/

相关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;
}

看看这个：https://jsfiddle.net/zer00ne/fqeapejg/ 我想你想要在方框之间保持一个恒定的1rem吗？

使用box-sizing: border-box将强制执行常用的框模式。即使应用了border-box，Flexbox也不包含边框。到目前为止，我真的不知道目的是什么。如果flexbox没有忽略边框，那么你就无法在flex容器中使用常量测量。我不确定为什么rem会变化并且像em一样。 Rem应保持不变，因为root的font-size不变。这就是我使用8px作为边框的原因，因为你想在框之间保持1rem的恒定距离（1rem =：root font-size = 16px / 2（每个框）= 8px。

是的，我看到你为身体宣布16px。如果你打算设置1rem = 16px，那么它应该是html { font-size: 16px; }。我没有打扰，因为它是所有浏览器AFAIK的默认设置。

相关变化：

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

body {
    box-sizing: border-box;
    font-size: 16px;
}
.bg-blc-2 {
    background-color: rgba(0, 0, 0, 0.2);
}
.txt-ctr {
    text-align: center;
}
.cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11, .cls-12 {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 0 1rem 0
}
div[class^="bg"] {
    border-left: 8px solid red;
    border-right: 8px solid red;
}

.cls-1 > * {
    flex: 1;
}
.cls-2 > * {
    flex: 0 1 calc(50%);
}
.cls-3 > * {
    flex: 0 1 calc(33.33%);
}
.cls-4 > * {
    flex: 0 1 calc(25%);
}
.cls-5 > * {
    flex: 0 1 calc(20%);
}
.cls-6 > * {
    flex: 0 1 calc(16.6667%);
}
.cls-7 > * {
    flex: 0 1 calc(14.28%);
}
.cls-8 > * {
    flex: 0 1 calc(12.5%);
}
.cls-9 > * {
    flex: 0 1 calc(11.11%);
}
.cls-10 > * {
    flex: 0 1 calc(10%);
}
.cls-11 > * {
    flex: 0 1 calc(9.09%);
}
.cls-12 > * {
    flex: 0 1 calc(8.33%);
}

<div class="cls-1">
  <div class="bg-blc-2 txt-ctr">1</div>
</div>
<div class="cls-2">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
</div>
<div class="cls-3">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
  <div class="bg-blc-2 txt-ctr">3</div>
</div>
<div class="cls-4">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
  <div class="bg-blc-2 txt-ctr">3</div>
  <div class="bg-blc-2 txt-ctr">4</div>
</div>
<div class="cls-5">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
  <div class="bg-blc-2 txt-ctr">3</div>
  <div class="bg-blc-2 txt-ctr">4</div>
  <div class="bg-blc-2 txt-ctr">5</div>
</div>
<div class="cls-6">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
  <div class="bg-blc-2 txt-ctr">3</div>
  <div class="bg-blc-2 txt-ctr">4</div>
  <div class="bg-blc-2 txt-ctr">5</div>
  <div class="bg-blc-2 txt-ctr">6</div>
</div>
<div class="cls-7">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
  <div class="bg-blc-2 txt-ctr">3</div>
  <div class="bg-blc-2 txt-ctr">4</div>
  <div class="bg-blc-2 txt-ctr">5</div>
  <div class="bg-blc-2 txt-ctr">6</div>
  <div class="bg-blc-2 txt-ctr">7</div>
</div>
<div class="cls-8">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
  <div class="bg-blc-2 txt-ctr">3</div>
  <div class="bg-blc-2 txt-ctr">4</div>
  <div class="bg-blc-2 txt-ctr">5</div>
  <div class="bg-blc-2 txt-ctr">6</div>
  <div class="bg-blc-2 txt-ctr">7</div>
  <div class="bg-blc-2 txt-ctr">8</div>
</div>
<div class="cls-9">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
  <div class="bg-blc-2 txt-ctr">3</div>
  <div class="bg-blc-2 txt-ctr">4</div>
  <div class="bg-blc-2 txt-ctr">5</div>
  <div class="bg-blc-2 txt-ctr">6</div>
  <div class="bg-blc-2 txt-ctr">7</div>
  <div class="bg-blc-2 txt-ctr">8</div>
  <div class="bg-blc-2 txt-ctr">9</div>
</div>
<div class="cls-10">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
  <div class="bg-blc-2 txt-ctr">3</div>
  <div class="bg-blc-2 txt-ctr">4</div>
  <div class="bg-blc-2 txt-ctr">5</div>
  <div class="bg-blc-2 txt-ctr">6</div>
  <div class="bg-blc-2 txt-ctr">7</div>
  <div class="bg-blc-2 txt-ctr">8</div>
  <div class="bg-blc-2 txt-ctr">9</div>
  <div class="bg-blc-2 txt-ctr">10</div>
</div>
<div class="cls-11">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
  <div class="bg-blc-2 txt-ctr">3</div>
  <div class="bg-blc-2 txt-ctr">4</div>
  <div class="bg-blc-2 txt-ctr">5</div>
  <div class="bg-blc-2 txt-ctr">6</div>
  <div class="bg-blc-2 txt-ctr">7</div>
  <div class="bg-blc-2 txt-ctr">8</div>
  <div class="bg-blc-2 txt-ctr">9</div>
  <div class="bg-blc-2 txt-ctr">10</div>
  <div class="bg-blc-2 txt-ctr">11</div>
</div>
<div class="cls-12">
  <div class="bg-blc-2 txt-ctr">1</div>
  <div class="bg-blc-2 txt-ctr">2</div>
  <div class="bg-blc-2 txt-ctr">3</div>
  <div class="bg-blc-2 txt-ctr">4</div>
  <div class="bg-blc-2 txt-ctr">5</div>
  <div class="bg-blc-2 txt-ctr">6</div>
  <div class="bg-blc-2 txt-ctr">7</div>
  <div class="bg-blc-2 txt-ctr">8</div>
  <div class="bg-blc-2 txt-ctr">9</div>
  <div class="bg-blc-2 txt-ctr">10</div>
  <div class="bg-blc-2 txt-ctr">11</div>
  <div class="bg-blc-2 txt-ctr">12</div>
</div>