文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >如何控制Flex盒之间的空格？

问如何控制Flex盒之间的空格？
EN

Stack Overflow用户
提问于 2015-11-26 05:34:16
回答 1查看 310关注 0票数 1

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

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

还有没有其他我可以尝试的技巧？

我的代码：

​

代码语言：javascript
运行
复制
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);
}
代码语言：javascript
运行
复制
<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/

css
flexbox
EN

回答 1

Stack Overflow用户

发布于 2015-11-26 06:05:56

更新

这里有一个替代方案：https://jsfiddle.net/zer00ne/x30boe1a/

这是一个围绕着整个布局的弹性列的版本。

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

这篇文章涵盖了一个我认为与您的项目相关的主题。

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

与相关的CSS

代码语言：javascript
运行
复制
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会变化并像它们一样工作。Rem应该保持不变，因为根的字体大小没有变化。这就是为什么我使用8px作为边框，因为你想要一个恒定的1rem距离(1rem = :root font-size = 16px/2 (每个框)= 8px。

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

相关更改：

代码语言：javascript
运行
复制
body {
    box-sizing: border-box;
}
div[class^="bg"] {
    border-left: 8px solid red;
    border-right: 8px solid red;
}

​

代码语言：javascript
运行
复制
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%);
}
代码语言：javascript
运行
复制
<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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/33926789

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档