我正在寻找固定的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>