在两个对齐的项目之间添加间隙的问题[重复]答案

【问题标题】：Issues adding a gap between two aligned items [duplicate]在两个对齐的项目之间添加间隙的问题[重复]
【发布时间】：2021-07-07 11:06:56
【问题描述】：

如下面的代码 sn-p 所示，我创建了两个宽度始终相同的按钮，但我无法在它们之间留出间隙。媒体查询版本（移动）也是如此我该怎么做？

.flex-container {
  display: flex;
  justify-content: center;   
  margin: 1em;
  
}

.flex-container .flex-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
 
}

.flex-item {
  height: 1.7rem;
  padding: 0 1.2rem;
  width: 100%;
 
}

.item1{
 margin-right:1vw; /*wont work*/
}


@media only screen and (max-width: 480px) {
.flex-container  .flex-container{
   display:flex;
   flex-direction: column; 
  }
}

<div class="flex-container">
  <div class="flex-container">
    <button class="flex-item item1">Button1</button>
    <button class="flex-item">Button2 really long with same width</button>
  </div>
</div>

【问题讨论】：

移除宽度：100% 或使用间隙
来自副本：stackoverflow.com/a/58041749/8620333

标签： html css

【解决方案1】：

column-gap: 1vw; 按预期工作：

.flex-container {
  display: flex;
  justify-content: center;
  margin: 1em;
  column-gap: 1vw;
}

.flex-container .flex-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.flex-item {
  height: 1.7rem;
  padding: 0 1.2rem;
  width: 100%;
}

@media only screen and (max-width: 480px) {
  .flex-container .flex-container {
    display: flex;
    flex-direction: column;
  }
}

<div class="flex-container">
  <div class="flex-container">
    <button class="flex-item item1">Button1</button>
    <button class="flex-item">Button2 really long with same width</button>
  </div>
</div>

【讨论】：