我正在寻找固定的40像素的列之间的间隙,但你把屏幕做得越宽,Flexbox产生的间隙就越大.如何设置此固定间隙并停止此行为?

(它抱怨这是一个简短的描述,但没有其他细节要添加,所以我只在这里添加这个文本,希望能阻止这条消息出现)

.browser-box {
  max-width: 270px;
  margin: 0 auto 40px;
  box-shadow: rgba(149, 157, 165, 0.2) 2px 8px 12px,
              rgba(149, 157, 165, 0.2) -2px 0 6px;
  /* box-shadow: rgba(149, 157, 165, 0.2) 0 8px 12px; */
  border-radius: 8px;
}

.browser-box h3 {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 500;
}

.browser-box p {
  margin-bottom: 35px;
  font-size: 15px;
}

.btn-browser {
  width: 75%;
  margin-bottom: 25px;
  margin-right: 0;
}

  .browsers-container {
    display: flex;
    justify-content: center;
    column-gap: 40px;
    margin-inline: auto;
  }
  .browser-box:nth-of-type(2) {
    transform: translateY(40px);
  }
  
  .browser-box:nth-of-type(3) {
    transform: translateY(80px);
  }
<div class="browsers-container">
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
</div>

推荐答案

填充是由.browser-box的css中的margin: 0 auto 40px;行引起的.这会将左右边距设置为auto,从而导致这种空间填充效果.将左填充和右填充更改为0允许列间距确定水平间距.

.browser-box {
  max-width: 270px;
  margin: 0 0 40px;
  box-shadow: rgba(149, 157, 165, 0.2) 2px 8px 12px,
              rgba(149, 157, 165, 0.2) -2px 0 6px;
  /* box-shadow: rgba(149, 157, 165, 0.2) 0 8px 12px; */
  border-radius: 8px;
}

.browser-box h3 {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 500;
}

.browser-box p {
  margin-bottom: 35px;
  font-size: 15px;
}

.btn-browser {
  width: 75%;
  margin-bottom: 25px;
  margin-right: 0;
}

  .browsers-container {
    display: flex;
    justify-content: center;
    column-gap: 40px;
    margin-inline: auto;
  }
  .browser-box:nth-of-type(2) {
    transform: translateY(40px);
  }
  
  .browser-box:nth-of-type(3) {
    transform: translateY(80px);
  }
<div class="browsers-container">
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
</div>

Html相关问答推荐

Rmarkdown上的垂直标签集

springBoot + Thymeleaf:基于Locale设置页面语言

Select 包含iframe的图形<><>

如何在htmlAngular 17的@for中使用索引

元素在向x提供溢出时被隐藏

如何使VS代码支持以模仿嵌套的方式对已经包含注释的HTML进行注释?

柔性盒内的物品;t覆盖整个宽度,即使设置为100%

Flex:第一个 div 有列,下一个 div 有行

当浏览器宽度减小时字体大小变得太大

图像如何能达到 HTML 表格的全宽?

即使必填字段为空,HTML 表单也已成功提交

使用 popover api 和 `

排列卡片时遇到困难

Github上部署需要花费几小时时间:等待github pages部署批准

不同屏幕尺寸的显示问题

使用 rgba() 的 css 中的边框不透明度不起作用

浮动元素忽略 margin-top 属性后的块元素

我如何使用 HTML 和 CSS 在我的下拉菜单中获得这种类型的样式

文本输入在 Chrome 中保持水平滚动,带有文本溢出:省略号

尽管设置了 width:100% left:0,但居中对齐的 CSS 动画并不对称