Issues adding a gap between two aligned items

Question

As shown in the code snippet below i have created two buttons that are always the same width, but im unable to make a gap between them. Same goes for the mediaquery version (mobile) How can i do it?

.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>

from the duplicate: https://stackoverflow.com/a/58041749/8620333 — Temani Afif, Apr 12 '21 at 11:02

score 1 · Accepted Answer · answered Apr 12 '21 at 11:01

column-gap: 1vw; works as expected:

.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>

Issues adding a gap between two aligned items

1 Answers1