css - 如何控制 Flex 框之间的空间？

Question

我正在尝试使用 CSS 属性 flexbox 来制作流畅的网格。我注意到当我使用 space-between 时，空格不一致。它们开始时很宽，然后变窄。如何让 flexbox 中的间距等于 1rem？

我尝试使用 calc 减少 1rem。这只会阻止 gutter 变得比 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 应该保持不变，因为根的字体大小没有改变。这就是为什么我使用 8px 作为边框，因为你希望框之间的距离恒定为 1rem (1rem = :root font-size = 16px/2 (each box) = 8px.

顺便说一句，我看到你为 body 声明了 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>