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

Posted 2023-03-06

【中文标题】在两个对齐的项目之间添加间隙的问题[重复]

【英文标题】：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% 或使用间隙

来自副本：***.com/a/58041749/8620333

【参考方案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>