我如何使用弹性框将按钮堆叠在一起

Question

我正在学习 HTML 和 CSS，我在使用 CSS 弹性框时遇到了一些麻烦所以我有这个代码

:root {
  --blue-color: #18479f;
  --gold-color: #e8b224;
}
html,
body {
  box-sizing: border-box;
  margin: 0;
  scroll-behavior: smooth;
  padding: 0;
  height: 100%;
}
.sub-hero{
  height: 60vh;

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.buttons-all{
  display: flex;
  justify-content: center;
 position: relative;
 
}
.slideshow-mid{
  overflow: hidden;
  width: 550px;
  height: 400px;
  border: var(--blue-color) 3px solid;


}
.slideshow-mid img{
  width: 550px;
  
}

.buttons-all .buttons{


}

.buttons .button1{
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  border: solid var(--blue-color) 3px;
  width: 300px;
  height: 80px;
  border-radius: 20px; 
  overflow: hidden;
  /* margin-left: 1300px;
  margin-top: 100px; */
  box-shadow: 0px 5px var(--gold-color);

}
.buttons .button1:hover{
  transform: translateY(5px);
  box-shadow: 0px 0px var(--gold-color);
}
.buttons .button1 a:hover span{
  color: var(--gold-color);
}
.buttons .button1 a{
 text-decoration: none;
 height: 80px;
 padding-top: 46px;


 
 }
.buttons .button1 .home-fire{
  position: absolute;
  right: 200px;
  bottom: 0px;
  height: 85px;
  padding: 0;

}
.buttons .button1 .fire1{
  position: absolute;
  left: 43px;
  height: 25px;  
  animation: fire 2s ease-in-out infinite;
 }
 .buttons .button1 .fire3{
  position: absolute;
  left: 70px;
  bottom: 0px;
  height: 25px;  
  animation: fire 5s ease-in-out .5s infinite;
 
 }
 .buttons .button1 .fire2{
  position: absolute;
  left: 73px;
  top: 0px;
  transform: rotate(45deg);
  height: 20px;  
  animation: fire 2s ease-in-out .2s infinite;
 
 }
 @keyframes fire{
  0%{
    opacity: 50%;
    transform: translateX(3px);
  }
  10%{
    opacity: 100%;
    transform: translateX(-3px);

  
  }
  20%{
    opacity: 50%;
    transform: translateX(3px);

  }
  30%{
    opacity: 100%;
    transform: translateX(-3px);

  }
  40%{
    opacity: 50%;
    transform: translateX(3px);

  }
  50%{
    opacity: 100%;
    transform: translateX(-3px);

  }
  60%{
    opacity: 50% ; 
    transform: translateX(3px);

  }
  70%{
    opacity: 100%;
    transform: translateX(-3px);

  
  }
  80%{
    opacity: 50%;
    transform: translateX(3px);

  
  }
  90%{
    opacity: 100%;
    transform: translateX(-3px);

  } 
   100%{
    opacity: 50%;
    transform: translateX(3px);

  }

}
 .buttons .button1 span {
   font-family: vazirbold;
   font-size: 1.3rem;
   padding-left: 140px;
   color: var(--blue-color);
   
  
 
 }



.buttons .button2{
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  border: solid var(--blue-color) 3px;
  width: 200px;
  height: 80px;
  border-radius: 20px; 
  overflow: hidden;
  /* margin-left: 1075px;
  margin-top: -85px; */
  box-shadow: 0px 5px var(--gold-color);

}
.buttons .button2:hover{
  transform: translateY(5px);
  box-shadow: 0px 0px var(--gold-color);
}

.buttons .button2 a{
  position: relative;
 text-decoration: none;
 height: 80px;
 padding-top: 46px;
 }
 .buttons .button2 a:hover span{
   color: var(--gold-color);
 }
 .buttons .button2 .barbari-icons{
   display: flex;
   position: absolute;
   overflow: hidden; 
   align-items: center;
   height: 80px;
   width: 95px;
   top: 22px;
   right: 95px;
 

 
 }
.buttons .button2 .truck{
  position: absolute;
  bottom: 0px;
  height: 50px;
  padding-right: 25px;
  animation: truck 3s ease-in-out infinite 1.5s;

}
.buttons .button2 .plane{
  position: absolute;
  left: 43px;
  height: 50px;  
  padding-left: 25px;
  animation: plane 3s ease-in-out infinite;
 }
 @keyframes plane{
   0%{
     transform: translateX(-125px);
   }
   100%{
    transform: translateX(40px);
  }
  
 }
 @keyframes truck{
  0%{
    transform: translateX(-60px);
  }
  50%{
   transform: translateX(20px);
 }
 100%{
   transform: translateX(100px);
 }
 
}
 .buttons .button2 span {
   font-family: vazirbold;
   font-size: 1.3rem;
   padding-left: 85px;  
   color: var(--blue-color);
  }


  .buttons .button3{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    border: solid var(--blue-color) 3px;
    width: 525px;
    height: 100px;
    border-radius: 20px; 
    overflow: hidden;
    /* margin-left: 1075px;
    margin-top: 25px; */
    box-shadow: 0px 5px var(--gold-color);
  
  }
  .buttons .button3:hover{
    transform: translateY(5px);
    box-shadow: 0px 0px var(--gold-color);
  }
  
  .buttons .button3 a{
    position: relative;
   text-decoration: none;
   height: 80px;
   padding-top: 40px;
   }
   .buttons .button3 a:hover span{
     color: var(--gold-color);
   }
  
  .buttons .button3 .car-normal{
    position: absolute;
    bottom: 10px;
    height: 48px;
    right: 150px ;
  
  }
  .buttons .button3 .car-hitting {
    position: absolute;
    height: 78px;  
    bottom: -6px;
    left: -92px;
    animation: car-hitting 3s ease-in-out infinite;
   }
   .buttons .button3 .shield {
    position: absolute;
    right: 210px;
    height: 40px;  
    bottom: 65px;
    animation: shield 3s ease-in-out infinite;
   }
   .buttons .button3 .explosion {
    position: absolute;
    right: 170px;
    height: 40px;  
    bottom: 13px;
    animation:  2s ease-in-out infinite;
    padding-left: 25px;
    animation: explosion 3s ease-in-out infinite;
   }
   @keyframes shield{
     0%{
       transform: scale(20%);
     }
     30%{
      transform: scale(100%);
    }
    100%{
      transform: scale(20%);
    }
    
   }
   @keyframes car-hitting{
    0%{
      transform: translateX(90px);
    }
    30%{
     transform: translateX(320px);
   }
 
   100%{
    transform: translateX(90px);

   }

   
  }
  @keyframes explosion{
    0%{
      transform: scale(0%)
    }
    25%{
     transform: scale(0%);
   }
 
   32%{
    transform: scale(100%);
    opacity: 1;

   }
   65%{
     opacity: 0;
   }
   100%{
     opacity: 0;
   }
  }
   .buttons .button3 span {
     font-family: vazirbold;
     font-size: 1.5rem;
     color: var(--blue-color);
     padding: 0 0 0 380px;

    }
  

    .buttons .button4{
      display: flex;
      position: relative;
      justify-content: center;
      align-items: center;
      border: solid var(--blue-color) 3px;
      width: 200px;
      height: 80px;
      border-radius: 20px; 
      overflow: hidden;
      /* margin-left: 1400px;
      margin-top: 25px; */
      box-shadow: 0px 5px var(--gold-color);
    
    }
    .buttons .button4:hover{
      transform: translateY(5px);
      box-shadow: 0px 0px var(--gold-color);
    }
    
    .buttons .button4 a{
      position: relative;
     text-decoration: none;
     height: 80px;
     padding-top: 46px;
     }
     .buttons .button4 a:hover span{
       color: var(--gold-color);
     }
    .buttons .button4 .home-heart{
      position: absolute;
      bottom: 35px;
      height: 55px;
      padding-right: 25px;
      animation: home 1s ease-in-out infinite ;
      transform-origin: center;
    
    }
    .buttons .button4 .family{
      position: absolute;
      left: -13px;
      bottom: 35px;
      height: 30px;  
      padding-left: 25px;
      animation: family 1s ease-in-out infinite;

     }
     @keyframes home{
       0%{
         transform: scale(1);
       }
       50%{
        transform: scale(1.1);
      }
      100%{
        transform: scale(1);
      }
     }
     @keyframes family{
      0%{
        opacity: 20%;

      }
      50%{
      opacity: 100%;

     }
     100%{
       opacity: 20%;

     }
     
    }
     .buttons .button4 span {
       font-family: vazirbold;
       font-size: 1.3rem;
       padding-left: 85px;  
       color: var(--blue-color);
      }
    
    

      .buttons .button5{
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        border: solid var(--blue-color) 3px;
        width: 300px;
        height: 80px;
        border-radius: 20px; 
        overflow: hidden;
        /* margin-left: 1075px;
        margin-top: -86px; */
        box-shadow: 0px 5px var(--gold-color);
      
      }
      .buttons .button5:hover{
        transform: translateY(5px);
        box-shadow: 0px 0px var(--gold-color);
      }
      .buttons .button5 a:hover span{
        color: var(--gold-color);
      }
      .buttons .button5 a{
       text-decoration: none;
       height: 80px;
       padding-top: 46px;
      
      
       
       }
      .buttons .button5 .cloud{
        position: absolute;
        right: 215px;
        bottom: 51px;
        height: 25px;
        padding: 0;
        animation: cloud 2s ease-in-out infinite;
      
      }
      .buttons .button5 .umbrella{
        position: absolute;
        left: 43px;
        height: 45px;  
        animation: umbrella 2s ease-in-out infinite;
       }
       .buttons .button5 .ppl1{
        position: absolute;
        left: 70px;
        bottom: 0px;
        height: 28px;  
        /* animation: fire 5s ease-in-out .5s infinite; */
       
       }
       .buttons .button5 .ppl2{
        position: absolute;
        left: 48px;
        bottom: 0;
        height: 28px;  
        /* animation: fire 2s ease-in-out .2s infinite; */
       
       }
       
       @keyframes cloud{
        0%{
          transform: scale(1);
          opacity: 100%;
        }
        50%{
         transform: scale(1.2);
         opacity: 50%;
       }
       100%{
         transform: scale(1);
         opacity: 100%;
       }
      }
      @keyframes umbrella{
        0%{
          transform: rotate(5deg)
        }
        50%{
         transform: rotate(-5deg);
       }
       100%{
         transform: rotate(10deg);
       }
      }
       .buttons .button5 span {
         font-family: vazirbold;
         font-size: 1.3rem;
         padding-left: 140px;
         color: var(--blue-color);
         
        
       
       }

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<section class="sub-hero" id="sub-hero">
      <div class="buttons-all">
        <div class="slideshow-mid">
          <img src="img/bime-banner-site.png" alt="cc" />
        </div>
        <div class="buttons">
          <div class="button1">
            <a href="#" target="_blank">
              <img class="home-fire" src="img/home.svg" alt="home" />
              <img class="fire1" src="img/fire.svg" alt="fire" />
              <img class="fire2" src="img/fire.svg" alt="fire" />
              <img class="fire3" src="img/fire.svg" alt="fire" />
              <span>بیمه آتش سوزی</span>
            </a>
          </div>
          <div class="button2">
            <a href="#" target="_blank">
              <div class="barbari-icons">
                <img class="truck" src="img/truck.svg" alt="truck" />
                <img class="plane" src="img/plane.svg" alt="plane" />
              </div>
              <span>بیمه باربری</span>
            </a>
          </div>
          <div class="button3">
            <a href="#" target="_blank">
              <img class="car-normal" src="img/normal-car.svg" alt="car" />
              <img class="car-hitting" src="img/hitting-car.svg" alt="car" />
              <img src="img/explosion.png" alt="explosion" class="explosion" />
              <img src="img/shield.svg" alt="shield" class="shield" />

              <span>بیمه اتومبیل</span>
            </a>
          </div>
          <div class="button4">
            <a href="#" target="_blank">
              <img
                class="home-heart"
                src="img/home-with-heart.svg"
                alt="home"
              />
              <img class="family" src="img/family.svg" alt="family" />

              <span>بیمه عمر</span>
            </a>
          </div>
          <div class="button5">
            <a href="#" target="_blank">
              <img class="ppl1" src="img/ppl1.svg" alt="ppl" />
              <img class="ppl2" src="img/ppl2.svg" alt="ppl2" />
              <img src="img/umbrella.svg" alt="umbrella" class="umbrella" />
              <img src="img/cloud.svg" alt="cloud" class="cloud" />

              <span>بیمه مسئولیت</span>
            </a>
          </div>
          <div class="button6"></div>
          <div class="button7"></div>
          <div class="button8"></div>
        </div>
      </div>
    </section>
</body>
</html>

我希望我的按钮像这样相互堆叠

但问题是我不知道如何设置它们以及如何设置每列的宽度，因此只需要 space 的数量（比如我希望我的列为 550px，如果2 个按钮可以适合，如果不是，则该列中只有一个按钮）。现在我看了很多 YouTube 视频，这让我更加困惑请帮助我！

Answer 1

我们创建一个父容器并在内部使用 flexBox 并将其方向设置为行这意味着如果有更多子容器总是将它们添加到同一行并且我们使用 flex-wrap: wrap; 让如果第一行内的某些框超过宽度限制，它将创建另一行。

display:flex;
flex-direction: row;
flex-wrap: wrap;

然后在框中我们使用 flex-grow: 1 让每个 flex child(.box) 在它们的行内尽可能多地增长。

body{
  display: grid;
  place-content: center;
  background-color: bisque;
  min-height: 100vh;
}



.container{
  padding: 1rem;
  background-color: tomato;
  min-height: 70vh;
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  max-width:550px;
  margin:0 auto;
  column-gap: 0.5rem;
  row-gap: 0.5rem;
  border-radius: 1rem;
}


.box{
  background-color: yellowgreen;
  flex-grow:1;
  display: grid;
  place-content: center;
  height: 10rem;
  border-radius: 1rem;
  white-space: nowrap;
}

.box-fullrow{
  flex-basis: 100%;
}

<div class="container">
      <div class="box">
        <p>Lorem ipsum dolor</p>
      </div>
      <div class="box">
        <p>Lorem, ipsum.</p>
      </div>
      <div class="box">
        <p>Lorem ipsum dolor sit amet consectetur hello</p>
      </div>
      <div class="box">
        <p>Lorem.</p>
      </div>
      <div class="box">
        <p>Lorem, ipsum.</p>
      </div>
      <div class="box box-fullrow">
        <p>Lor</p>
      </div>
</div>

我如何使用弹性框将按钮堆叠在一起

How can i stack buttons on top of each other using flex box

html

css

css-grid