css - Flexbox 2 列但间隔为 3

标签 css flexbox

<分区>

我正在研究一种方法

我有一个主 div 和 2 个其他 div。

.main {
  display: flex;
  justify-content: space-between;
}
<div class="main">
  <div>Goes in the Middle</div>
  <div>Goes on the right</div>
</div>

我需要的是间隔 2 个 div 的空间,就好像它有 3 个 div,但只有 2 个。

在没有 3 个 div 的情况下,如何使用 flex 做到这一点?

最佳答案

只需将 div 的宽度设置为 33.33333%:

.main {
  display: flex;
  justify-content: space-between;
}

.main>div {
  width: 33.3333%;
  /* below for test only */
  border: 1px solid red;
  box-sizing: border-box;
}

/* to push first div into middle - if you want it on left, remove this */
.main>div:first-child {
  margin-left:auto;
}
<div class="main">
  <div>Goes in the Middle</div>
  <div>Goes on the right</div>
</div>

关于css - Flexbox 2 列但间隔为 3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51656033/

上一篇:html - 为什么 CSS 填充在作为 HTML 表单的父级应用于 div 时不能统一工作?

下一篇:html - CSS 和 rem : changing the html font-size creates inconsistent dimensions

相关文章:

javascript - 如何使用内容脚本将另一个 html 连同它的 css 文件一起注入(inject)到 html 中?

css - 使用 SASS 生成 flexbox 类

html - 仅CSS的砌体布局

html - 使用 CSS(Flex 或 CSS Grid)在水平和垂直布局之间切换

css - 按钮在不同分辨率下重叠

CSS - 从 div 标签调用另一个 div 标签

html - 使用 flexbox 对齐字符串

HTML/CSS - 在 DIV 的一侧创建 "arrow"

css - 使用 flexbox 之间的空间

css - 想要将特定的 div 向右移动