Misleading min-width and max-width of @media in scss

Question

I am following this question to display 2 buttons horizontally and vertically based on Responsiveness of the Angular application.

Previous Question

.dialog-buttons-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;

  @media screen and (min-width: 660px) and (max-width: 680px) {
    gap: 20px;
  }

  @media screen and (max-width: 681px) {
    gap: 5px;
  }

  @media screen and (min-width: 682px) {
    gap: 20px;
  }
}

First when the screen size is above 680px, then the gap between the 2 buttons is coming as 20px and when it is between 660px and 680px, it is coming as 5px. The @media query is not firing and the gap is not getting created with 20px.

I want it to have a gap of 20px when it is horizontally aligned and to have a gap of 5px when it is vertically aligned.

What is wrong with my code?

Answer 1

We can use the short form of gap which is

/* gap: <row-gap> <column-gap> */
   gap: 5px 20px;

So that when it's horizontally aligned, row-gap gets applied else column-gap:

.dialog-buttons-content {
  display: flex;
   justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 20px;
  flex-direction: row;
}
.vertical {
  flex-direction: column;
} 

<div class="dialog-buttons-content">
  <div class="item">One</div>
  <div class="item">Two</div>
</div>

<div class="dialog-buttons-content vertical">
  <div class="item">One</div>
  <div class="item">Two</div>
</div>